vue.js v-html 和 v-text的使用 例子

版权声明：转载请标明出处 https://blog.csdn.net/qq_43789593/article/details/91162252

v-text 和 v-html的使用

代码

这里不严格的截取代码为了浏览方便
//html
<div id="ctr-01" >
<div v-cloak style="background-color: antiquewhite;">++++{{first}}-----</div>
// ++++vue是什么?-----
<div v-text="(15/3)+first+'vue是一个渐进式框架'">xxxxx</div>
// 5vue是什么?vue是一个渐进式框架
<div v-text="h1"></div>
// <h1>我是一个标签</h1>
<div v-html="h1"></div>
// 我是一个标签
<div v-cloak style="background-color: antiquewhite;">++++{{h1}}-----</div>
</div>
// ++++<h1>我是一个标签</h1>-----

//js的代码
var vm = new Vue({
el:'#ctr-01',
data:{
first:'vue是什么?',
h1:'<h1>我是一个标签</h1>'
}
})

上面5个例子展示了v-html 和 v-text的差别之处：是否对标签进行转义

还要说明的几点

1.v-text和v-html=“” 双引号之内是一个表达式 它可以如同js中的表达式一样进行运算,拼接字符串

2.v-text和v-html没有闪烁问题 因为他们一开始就没有内容,也可以一开始就添加内容，加载完会被覆盖

3.插值表达式的值 会按照v-text对标签进行转义