四、在html中绑定数据

一、Mustache 语法

最常见的绑定方式，视图显示数据并及时自动更新，无需手动控制。

<!--<div id="app">{{name}}</div>
      ===
<div id="app" v-text="name"></div>-->
<div id="app">{{name}}</div>
<script>
new Vue({
  el:"#app",
  data:{
    name:"hiddensmile"
  }
})
</script>

<strong>释：</strong>页面视图上成功显示的data中的name的值:“hiddensmile”。

成功显示的data中的name的值

二、绑定纯html

数据包含了一些html的标签代码

<div id="app">{{name}}</div>
<script>
    new Vue({
        el:"#app",
        data:{
            name:"<strong>hiddensmile</strong>"
        }
    })
</script>

<strong>释：</strong>文本“hiddensmile”被一个<strong>标签包住，此时strong标签也会被渲染出来，用原来的双大括号{{ }}方式，不能满足，需要用vue提供的v-html指令

<!--
<div id="app" >{{name}}</div>
需要用vue提供的v-html指令
-->
<div id="app" v-html="name"></div>

v-html渲染成功

<strong>释：</strong>明显的加粗效果，说明< strong >标签发挥了作用。

三、绑定属性

html标签的属性也很重要，比如：< a >标签的href属性，<img/>标签的src属性等,此时用用v-bind指令；

<div id="app">
    <a v-bind:href="link">百度</a>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            link:"https://www.baidu.com/",
        }
    })
</script>

<strong>释：</strong>在视图中的a标签，在< a >标签加上v-bind:来修饰href属性，而它的值就是data中的属性link；
<b>注：</b>v-bind 指令的简写（v-bind指令的简写，仅需要冒号。）
原本完整的写法：

 <a v-bind:href="link">百度</a>

简洁的写法：

 <a :href="link">百度</a>

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

<div id="app">
    <a v-bind:href="link">百度</a><br><br>
    <button :show="show_true">我是真的</button><br><br>
    <button :show="show_false">我是假的</button>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            link:"https://www.baidu.com/",
            show_true:true,
            show_false:false,
        }
    })
</script>

当值为false的时候，属性会被移除

<b>注：</b>当属性值设置成true的时候，disabled的值为解析成“disabled”，当属性值设置成false的时候，属性disabled直接被移除掉了。

四、支持javascript表达式 (对数据进行简单的运算：javascript表达式支持)

1) 加减乘除运算：

<div id="app">{{num+3}}</div>
<script>
    new Vue({
        el:"#app",
        data:{
            num:5,
        }
    })
</script>

直接渲染结果

<b>注：</b>在渲染的时候，并不是直接渲染data的num，而是对num进行的简单的加法：num+3，渲染的结果为：8。

2) 三元运算符：

<div id="app">
    {{num+3}}
    <p>{{ ok ? 'yes':'no' }}</p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            num:5,
            ok:true,
        }
    })
</script>

<strong>注：</strong>三元运算符计算，上面元算的结果为：“yes”。

三元运算符渲染成功

3) 字符串拼接：

<div id="app">
    <a :href="'http://'+host">百度</a>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            host:"baidu.com",
        }
    })
</script>

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