第六节：教你如何在html中绑定数据

By xyp-hf

Update date:

提醒一下，这两节的内容在后面实战的时候很重要，如果落下的同学可以回去翻看学习，不必害怕难学，这里没有难学的教程。

这一节，我们学习如何在html上绑定我们实例中的数据。

Mustache 语法

什么叫Mustache语法，别被这高大上的叫法吓到了，其实就是双大括号{{ }}的写法，在之前的章节我们就演示过在视图中显示我们的数据，这是最常见的绑定方式。有了它，我们可以轻松地在视图显示我们的数据并及时自动更新，无需手动控制。

1
2
3
4
5
6
7
8
9
<div id="app">{{ name }}</div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
     name:"前端君"
    }
 });
 </script>

十分简单，页面视图上也成功显示我们的data中的name的值：“前端君”。

绑定纯html

有时候有一种这样的需求，我们的数据包含了一些html的标签代码，比如： 

1
name:"<strong>前端君</strong>"

文本“前端君”被一个标签包住，而我们在展示的是，需要合理地渲染strong标签，再显示我们想要展示文本内容。这种情况，用原来的双大括号{{ }}方式，就不能满足了，它会渲染成这样：

被当作是普通的文本数据被展示了，这并不是我们想要的结果。这个是时候，你需要用vue提供的v-html指令，用法如下：

1
2
3
4
5
6
7
8
9
<div id="app" v-html="name"></div>
<script>
let app = new Vue({
   el:"#app",
   data:{
    name:"<strong>前端君</strong>"
   }
});
</script>

v-html以属性的形式添加到了div中，值为“name”，也就是我们数据data中的name：

1
"<strong>前端君</strong>"

我们来看看视图展示的结果：

视图上的“前端君”有了明显的加粗效果，说明标签发挥了作用，我们通过chrome的开发者工具查看解析生成后的html文档，name的值，被解析成html标签，并作为字节点，插入在

中去。
这，就是v-html的作用啦。

绑定属性

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

当然不是，这里不需要用双大括号{{ }}，我们用v-bind指令，如下：

1
2
3
4
5
6
7
8
9
10
11
12
 <div id="app">
   <!--在href前用v-bind：修饰-->
   <a v-bind:href="link">hello官网</a>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
     link:"http://hello.com"
    }
 });
</script>

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

标签的属性href的值成功地绑定了data数据link的值，通过v-bind指令，就成功地将数据成功地绑定在视图的标签的属性中。

v-bind 指令的简写

对于v-bind指令，如果一个标签中需要绑定多个属性的话，就得连续写多个v-bind。

问题是没问题，但vue为了我们的代码更简洁易看，提供了v-bind指令的简写，仅需要冒号。

原本完整的写法：

1
2
<!--完整的写法-->
 <a v-bind:href="link">hello官网</a>

简洁的写法：

1
2
<!--缩写-->
<a :href="link">hello官网</a>

此外，需要注意的是：当渲染的属性值是布尔值的时候（true和false），效果就不一样了，并不是简单地将true或者false渲染出来，而是当值为false的时候，属性会被移除。

我们试试看： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
   <!--我们用缩写的语法-->
   <button :disabled="dis_true">
      我是true
   </button>
   <button :disabled="dis_false">
      我是false
   </button>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
      dis_true:true,
      dis_false:false
    }
 });
 </script>

我们通过v-bind指令的缩写，给两个button标签的disabled属性绑定值，一个值为true，一个值为false，我们来看看效果：

我们看到，当属性值设置成true的时候，disabled的值为解析成“disabled”，当属性值设置成false的时候，属性disabled直接被移除掉了。

支持javascript表达式

上面讲到的都是将数据简单地绑定在视图上，但事实上，vue还支持我们对数据进行简单的运算：javascript表达式支持。
我们举3个例子演示一下：

1.加减乘除运算：

1
2
3
4
5
6
7
8
9
<div id="app">{{ num+3 }}</div>
<script>
let app = new Vue({
   el:"#app",
   data:{
       num:2
   }
});
</script>

上面的案例，在渲染的时候，并不是直接渲染data的num，而是对num进行的简单的加法：num+3，渲染的结果为：5。

2.三元运算符：

1
2
3
4
5
6
7
8
9
<div id="app">{{ ok ? 'yes':'no' }}</div>
<script>
let app = new Vue({
   el:"#app",
   data:{
       ok:true
   }
});
</script>

三元运算符计算，上面元算的结果为：“yes”。

3.字符串拼接：

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
 <a :href="'http://'+host">hello官网</a>
</div>
<script>
let app = new Vue({
   el:"#app",
   data:{
       host:'hello.com'
   }
});
</script>

标签的href属性的值通过两个字符串的拼接起来，我们看看最后拼接效果：

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

本节小结

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

Vue.js