v-text
作用:设置标签的文本值(textContent)
<div id="app">
//使用v-text标签的只能显示出等号后“”内的内容
<h1 v-text="message+'!?'">!?</h1>
<h1 v-text="message">!?</h1>
//下面两种方法都能显示出“!?"
<h1>{{message+"!?"}}</h1>
<h1>{{message}}!?</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"hyh"
}
})
</script>
效果:
v-html
设置标签的innerHTML
<div id="app">
<h1 v-html="content1"></h1>
<h1 v-text="content1"></h1>
<h1 v-html="content2"></h1>
<h1 v-text="content2"></h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
content1:"hyh",
content2:"<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
结果:
如果单纯是输出内容,则v-text和v-html两者效果没有区别。
但如果是html链接,v-html则体现除它的作用。
总结
1.原始HTML:v-html 双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令。
2.操作纯文本:v-text 它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值。