1、Mustache语法
就是双大括号{{}}的写法，有了它，我们可以在视图显示我们的数据并及时自动更新，无需手动控制。
<div id="app">{{ name }}</div>
<script>
let app = new Vue({
el: '#app',
data: {
name: '前端学习'
}
})
页面上就会显示——前端学习。
2、绑定纯html
有时候有这样的需求，我们的数据包含了一些html的标签代码，比如：
name: '<strong>前端学习</strong>'
文本“前端学习”被一个<strong>标签包住，而我们在展示的是，需要合理地渲染strong标签，再显示我们想要展示文本内容。这种情况，用原来的双大括号{{}}方式，就不能满足了，他会渲染成：
<strong>前端学习</strong>
这时候可以用vue提供的v-html指令：
<div id="app" v-html="name"></div>
<script>
let app = new Vue({
el: '#app',
data: {
name: '<strong>前端学习</strong>‘
}
})
</script>
效果图.png
3、绑定属性
前面两个都是控制视图展示文本内容，有时候，html标签的属性也很重要，比如：<a> 标签的 href 属性，<img /> 标签的 src 属性等。Vue 中如何将 data 中的数据绑定为这些属性的值呢？还是用双大括号 {{}} 的写法吗？
当然不是，这里不需要用双大括号 {{}}，我们用 v-bind 指令，如下：
<div id="app">
<!-- 在href前用v-bind：修饰 -->
<a v-bind:href="link">百度</a>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
link: 'http://www.baidu.com'
}
})
</script>
在视图中的 a 标签，我们在 <a> 标签加上 v-bind: 来修饰 href 属性，而它的值就是 data 中的属性 link。我们来看看解析渲染的 html 页面效果。
效果图.png
标签 <a> 的属性 href 的值成功地绑定了 data 数据 link 的值，通过 v-bind 指令，就成功地将数据绑定在视图的标签的属性中了。
另外 v-bind 有简写方式，就仅仅是冒号 :。
<a v-bind:href="link">百度</a>
<a :href="link">百度</a>
4、支持JavaScript表达式
- 加减乘除运算：
<div id="app">{{ num+3 }}</div>
<script>
let app = new Vue({
el:"#app",
data:{
num:2
}
});
</script>
效果图.png
- 三元运算符：
<div id="app">{{ ok ? 'yes':'no' }}</div>
<script>
let app = new Vue({
el:"#app",
data:{
ok:true
}
});
</script>
效果图.png
- 字符串拼接
<div id="app">
<a :href="'http://'+host">百度</a>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
host:'www.baidu.com'
}
});
</script>
效果图.png
注意：
虽然vue支持javascript表达式运算，我们只会在运算比较简单的情况下才会这么玩，当运算比较繁琐复杂的时候，一定要用vue的computed属性来进行计算。
小结
在视图绑定数据的方法：Mustache语法（双大括号语法），绑定纯HTML，绑定属性，支持javascript表达式的写法，以及表达式写法和computed区别。
网友评论