v-html
它与其它二者最不同的地方,是它可以识别字符串的标签,自动将其解析为标签。
注:msg会覆盖div之间的值
<div v-html="msg"></div>
let vm = new Vue({
el: '#app',
data: {
msg: '<h1>你好</h1>'
},
});
v-text
v-text 将变量是什么则解析为什么。
<div v-text="msg"></div>
let vm = new Vue({
el: '#app',
data: {
msg: '<h1>你好</h1>'
},
});
注:msg会覆盖div之间的值
文本插值
文本插值是相对最方便的,但是它会有在解析vue的时候会有闪烁问题,需要结合v-cloak使用
<div>{{msg}}</div>
let vm = new Vue({
el: '#app',
data: {
msg: '<h1>你好</h1>'
},
});