06、如何在html中绑定数据

1、Mustache语法

---

就是双大括号{{}}的写法，有了它，我们可以在视图显示我们的数据并及时自动更新，无需手动控制。

{{ name }}

效果图.png

3、绑定属性

---

前面两个都是控制视图展示文本内容，有时候，html标签的属性也很重要，比如： 标签的 href 属性， 标签的 src 属性等。Vue 中如何将 data 中的数据绑定为这些属性的值呢？还是用双大括号 {{}} 的写法吗？
当然不是，这里不需要用双大括号 {{}}，我们用 v-bind 指令，如下：

  
  百度

在视图中的 a 标签，我们在 标签加上 v-bind: 来修饰 href 属性，而它的值就是 data 中的属性 link。我们来看看解析渲染的 html 页面效果。

效果图.png

标签 的属性 href 的值成功地绑定了 data 数据 link 的值，通过 v-bind 指令，就成功地将数据绑定在视图的标签的属性中了。
另外 v-bind 有简写方式，就仅仅是冒号 :。

百度
百度

4、支持JavaScript表达式

---

• 加减乘除运算：

{{ num+3 }}

效果图.png

• 三元运算符：

{{ ok ? 'yes':'no' }}

效果图.png

• 字符串拼接

  百度

效果图.png

注意：

虽然vue支持javascript表达式运算，我们只会在运算比较简单的情况下才会这么玩，当运算比较繁琐复杂的时候，一定要用vue的computed属性来进行计算。

小结

---

在视图绑定数据的方法：Mustache语法（双大括号语法），绑定纯HTML，绑定属性，支持javascript表达式的写法，以及表达式写法和computed区别。