立即学习:https://edu.csdn.net/course/play/6823/135316?utm_source=blogtoedu
四、v-text&v-html
1、v-text
v-text在模板中的的用法:
<span v-text="cont"></span>
js代码:
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在模板中的用法:
<span v-html="content"></span>
js代码(很简单跟上面讲的是一样):
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的攻击。
新手一枚,若有不足,请指正!