06、如何在html中绑定数据

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区别。