四、在html中绑定数据

一、Mustache 语法

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

{{name}}

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

成功显示的data中的name的值

二、绑定纯html

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

{{name}}

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

v-html渲染成功

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

三、绑定属性

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

    百度

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

 百度

简洁的写法：

 百度

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

    百度


    我是真的


    我是假的

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

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

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

1) 加减乘除运算：

{{num+3}}

直接渲染结果

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

2) 三元运算符：

    {{num+3}}
    
{{ ok ? 'yes':'no' }}

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

三元运算符渲染成功

3) 字符串拼接：

    百度

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