学习笔记(04):Vue2.x从入门到实战-v-text & v-html

立即学习:https://edu.csdn.net/course/play/6823/135316?utm_source=blogtoedu

四、v-text&v-html

1、v-text

v-text在模板中的的用法：

[code]<span v-text="cont"></span>

js代码：

[code]    var app=new Vue({
el:'#app',
data:{
cont:'hello world'
}
})

值得一提的是v-text相比于用{{xxx}}传输参数更好，因为v-text是加载完成后才会将参数写到页面中，就是说如果删除js代码v-text不会加载出任何东西，再来说说用{{xxx}}来做v-text相同功能时，如果js代码被删除或者网速很慢，网页就会直接显示的是{{xxx}}。

2、v-html

v-html在模板中的用法：

[code] <span v-html="content"></span>

js代码(很简单跟上面讲的是一样)：

[code]    var app=new Vue({
el:'#app',
data:{
cont:'hello world',
content:'<h1>hello</h1>'
}
})

如果v-html传参传的是不带html标签的内容，v-html和v-text在页面显示的内容是一样的，v-html指令的一个好处就是可以将html标签写入html中并运用，v-text不会这样，它是把引号里面的内容全部当成字符串加载并显示在页面。

另外，在实际的开发过程中用v-text是比较多的，因为v-html容易受到xss的攻击。

新手一枚，若有不足，请指正！

• 点赞
• 收藏
• 分享
• 文章举报