1、mustache语法
<div id="app">
{{message}} vue
<br>
{{firstName + ' ' + lastName}}
<br>
{{firstName}} {{lastName}}
<br>
{{counter * 2}}
</div>
2、v-once
当希望插值表达式中的内容仅渲染一次时......
<div id="app">
<h2>{{message}}</h2>
<!--v-on : 该指令修饰的元素和组件只渲染一次,不会随着数据的改变而改变 -->
<h2 v-once> {{message}}</h2>
</div>
3、v-html
当需要渲染的数据是一段 html 文本时
<div id="app">
<h2 v-html="url"></h2>
</div>
const app = new Vue({
el: "#app", //用于挂载要管理的元素
data: { //定义数据
url: '<a href="http://www.baidu.com">百度一下</a>'
}
})
4、v-text
和 mustache语法一致.....
只不过mustache语法会进行拼接,而 v-text 会进行替换
<div id="app">
<h2>{{message}},houchen</h2>
<h2 v-text="message">,houchen</h2> <!--v-text中的内容会将vue覆盖-->
</div>
5、v-pre
不对 mustache语法进行解析 ......
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2> <!-- 显示{{message}},不对插值表达式进行解析 -->
</div>
6、v-cloak
当vue正在渲染页面时,不显示 {{message}}
<div id="app">
<h2 v-cloak>{{message}}</h2>
</div>