Vue.js语法简介(二)插值
数据绑定最常见的形式就是使用Mustache语法(双括号)的文本插值<p>{{message}}</p>Mustache标签会被替换成Vue实例中数据对象message属性的值。只要绑定的数据对象上message属性发生了改变,插值处的内容就会被更新。这种传送数据方式跟之前不一样,之前我们做页面都是直接写<h2>你好,世界<h2>现在不是我们会通过变
·
数据绑定最常见的形式就是使用Mustache语法(双括号)的文本插值
<p>{{message}}</p>
Mustache标签会被替换成Vue实例中数据对象message属性的值。只要绑定的数据对象上message属性发生了改变,插值处的内容就会被更新。
这种传送数据方式跟之前不一样,之前我们做页面都是直接写
<h2>你好,世界<h2>
现在不是我们会通过变量的方式,把信息放到变量当中然后通过Mustache语法显示出来
<div id="vm">
{{message}}
</div>
<script src="./Vue.js/vue.js"></script>
<script>
var vm = new Vue({
data:{
message:"yang"
}
}).$mount('#vm')
</script>
除此之外,双括号表示法还可以识别js语法并进行解析
<div id="vm">
{{message}}
{{a+b}}
{{message.split('').reverse().join('')}}
</div>
<script src="./Vue.js/vue.js"></script>
<script>
var vm = new Vue({
data:{
message:"yang",
a:1,
b:2
}
}).$mount('#vm')
</script>
要注意:每个绑定都只能包含单个表达式,所以下面的示例都不会生效。
<!-- 这是语句,不是表达式 -->
<!-- {{var ee = 1}} -->
<!-- if语句也不会生效,可以使用三元表达式来代替 -->
<!-- {{if(ok) { return message}}} -->
更多推荐
已为社区贡献7条内容
所有评论(0)