<header class="post-header" style="display: block; color: rgb(85, 85, 85); font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">

vue模板语法

</header>

插值

文本

1.“Mustache”语法插值：

html：

<div id="app">
    <p>{{ msg }}</p>
</div>

js:

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

2.v-text指令
html

<div id="app">
    <p v-text="msg"></p>
</div>

js:

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

3.v-cloak指令
html:

<div id="app">
    <p v-cloak>{{ msg }}</p>
</div>

js:

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

解析HTML

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

<div id="app">
    <p v-html="msg"></p>
</div>

js:

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

绑定属性

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

<div v-bind:class="className"></div>

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

<div :class="className"></div>

对比

对于以上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:

<div id="app">
    <p v-text="msg"></p>
</div>

js:

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

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

<div id="app">
    <p v-text="msg">苹果的价格为</p>
</div>

js:

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

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

<div id="app">
    <p>苹果的价格为{{ msg }}元</p>
</div>

js:

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

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

<div id="app">
    <p v-cloak>苹果的价格为{{ msg }}元</p>
</div>

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

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