v-once
The v-once instruction only renders elements and components once. Subsequent re-rendering, the element / component and all its child nodes will be treated as static content and skipped.
<div id="app">
<h2>{{msg}}</h2>
<h2 v-once>{{msg}}</h2><!--此处的数据只渲染一次,v-once指令的作用-->
</div>
<script>
const app = new Vue({
el: '#app',
data: {
msg: '我是绑定的字符串数据',
}
})
</script>
v-html
v-html instruction, update the innerHTML content of the element as normal HTML insertion-it will not be compiled as a Vue template.
<div id="app">
<h2>{{url}}</h2>
<h2>{{urlHtml}}</h2>
<h2 v-html="urlHtml"></h2><!--如果绑定的数据带html标签,使用v-html指令,数据渲染为html标签,而不是字符串-->
</div>
<script>
const app = new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com',
urlHtml: '<a href="http://www.baidu.com">百度一下</a>',
}
})
</script>
in-the
v-pre instruction, official explanation: skip the compilation process of this element and its sub-elements. Can be used to display original Mustache tags. Skipping a large number of nodes without instructions will speed up compilation.
<div id="app">
<h2 v-pre>{{urlHtml}}</h2><!--urlHtml应该为app绑定的数据,加了v-pre指令就会原封不动的显示{{urlHtml}},不会渲染绑定的数据-->
</div>
<script>
const app = new Vue({
el: '#app',
data: {
urlHtml: '<a href="http://www.baidu.com">百度一下</a>',
}
})
</script>