# vue模板语法 ( v-text 和 {{}} 区别)

vue模板语法

插值

文本

1.“Mustache”语法插值：

html：

    
{{ msg }}

js:

new Vue({
    el: '#app',
    data: {
        msg: 'Hello Vue.js'
    }
});

2.v-text指令
html

js:

new Vue({
    el: '#app',
    data: {
        msg: 'Hello Vue.js'
    }
});

3.v-cloak指令
html:

    
{{ msg }}

js:

new Vue({
    el: '#app',
    data: {
        msg: 'Hello Vue.js'
    }
});

解析HTML

v-html指令
使用“Mustache”语法和v-text指令，会对数据原格式输出，即使数据为html标签，也会照样显示标签本身，不会进行解析，要让html解析，则需要使用v-html指令。
html:

js:

new Vue({
    el: '#app',
    data: {
        msg: 'Hello Vue.js'
    }
});

绑定属性

绑定属性使用v-bind指令，比如你绑定class
html:

这样的话，data中的className的值就绑定到class中，需要注意的是，如果该值为转换为boolean的结果为false，则该属性会被移除，通过这种方式可以来控制div的显示或者隐藏等。可惜转换为boolean的值有false，0,0.0,"",[],{}。
如果你觉得使用v-bind:觉得麻烦，可以使用缩写形式:来代替v-bind:，上述代码缩写为：

对比

对于以上4中方式，v-html只是为了渲染html标签。v-bind用来绑定属性。而v-text和“Mustache”语法都能渲染普通文本数据，有一点区别就是，在渲染的数据比较多的时候，可能会把“Mustache”语法的大括号显示出来，为了解决这种问题，可以采用以下两种方式：①使用v-text渲染数据②使用“Mustache”语法渲染数据，但是同时使用v-cloak指令，在css中，使用：
css:

[v-cloak]: {
    display: none;
}

这样的话，就不会显示“Mustache”的大括号。而且，他们的区别，还没有完，不然我们直接用v-text不就行了，还有一点区别是，v-text渲染数据的时候，是渲染全部的数据，也就是说不能渲染局部的数据，如下代码：

html:

js:

new Vue({
    el: '#app',
    data: {
        msg: 'Hello Vue.js'
    }
});

v-text会把msg的数据全部渲染出来，而往往，后台返回的数据，不是全部的内容，比如以下代码：
html:

    
苹果的价格为

js:

new Vue({
    el: '#app',
    data: {
        msg: 5
    }
});

我们显示苹果价格的时候，往往后台存储的只是一个价格，用v-text就无法渲染，所以只能用“Mustache”语法，如下：
html:

    
苹果的价格为{{ msg }}元

js:

new Vue({
    el: '#app',
    data: {
        msg: 5
    }
});

为了防止网络慢等原因，在数据返回之前，可能显示的结果为:苹果的价格为{{ msg }}元，为了解决这种问题，我们添加v-cloak指令和css代码：
html:

    
苹果的价格为{{ msg }}元

[v-cloak]: {
    display: none;
}

总而言之就是一句话，解析html标签用v-html指令；绑定属性使用v-bind指令；渲染大片数据用v-text或者“Mustache”语法配置v-cloak指令和css的display: none;；渲染大片数据中的局部用“Mustache”语法，配合v-cloak指令和css。