三、Vue基础系统-Mustache语法

作者: 温新

阅读: 2775

时间: 2020-09-08 12:38:03

数据绑定使用“Mustache”语法（双括号）的文本插值，也就是{{}}数据替换。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Mustache语法</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<h3>{{ firstName }}</h3>
			<h3>{{ lastName }}</h3>
			<h3>{{ firstName + lastName }}</h3>
			<h3>{{ firstName }} {{ lastName }}</h3>
			<h3>{{ age * 2}}</h3>
			<h3>{{ lastName.split('.').reverse().join('.') }}</h3>
			<h3>{{ age ? '1岁了':'0岁了' }}</h3>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					firstName:'自如初',
					lastName:'https://www.ziruchu.com',
					age:1
				}
			});
		</script>
	</body>
</html>

从上面的安全中可以看到，Vue中的Mustache中语法支持基础的运算。关于更多的用法，官方文档更加详细。

请登录后再评论