簡單回顧:
JavaScript相关知识点
在JavaScript中有textContent
、innerHTML
、innerText
、outerText
、outerHTML
和nodeValue
。这些属性都可以用来获取某个元素的内容,也可以将内容或标签插入到某个元素中。看上去和渲染内容有点相关。
简单的理解一下这几个属性:
innerHTML
:获取从对象的起始位置到终止位置的全部内容,包括HTML标签。当内容都是文本的时候,可以把这个属性当做textContent
属性来用innerText
:获取从对象的起始位置到终止位置的内容,但它不会包括HTML标签outerHTML
:除了包含innerHTML
的全部内容外,还会包含对象标签本身textContent
:设置或返回指定节点的文本内容,以及它的所有后代。有时候,此属性可用于取代nodeValue
属性,但请记住此属性同时会返回所有子节点的文本。得到的结果跟innerText
的结果是一样的。如果是设置,则原本的子元素会被同时替换掉nodeValue
:和textContent
很像,都是用来获取某个元素中的内容,不过nodeValue
并不能直接操作某个DOM元素,它只能用来获取某段文本节点中的内容outerText
:和outerHTML
有同样的功能,它们都包括自身,不同的是outerText
获取的是元素内容,而outerHTML
获取到的内容包括元素
原文: https://www.w3cplus.com/vue/v-text-and-v-html.html © w3cplus.com
双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html
指令:
1-1:v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<script>
new Vue({
el: '#app',
data: {
rawHtml:'<span>Message</span>'
}
})
</script>
</body>
</html>
結果如下:
Using mustaches: <span>Message</span>
Using v-html directive: Message
这个 span
的内容将会被替换成为属性值 rawHtml
,直接作为 HTML——会忽略解析属性值中的数据绑定。注意,你不能使用 v-html
来复合局部模板,因为 Vue 不是基于字符串的模板引擎。反之,对于用户界面 (UI),组件更适合作为可重用和可组合的基本单位。
你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。
轉載自:vue官網:https://cn.vuejs.org/v2/guide/syntax.html
2-1:v-text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
<p>Using v-html directive: <span v-text="rawHtml"></span></p>
</div>
<script>
new Vue({
el: '#app',
data: {
rawHtml:'<span>Message</span>'
}
})
</script>
</body>
</html>
結果如下:
Using mustaches: <span>Message</span>
Using v-html directive: Message
Using v-html directive: <span>Message</span>
PS:所以由此看出text是渲染純文本的和{{}}是一樣的效果。
v-text=""
指令中的双引号并不是代表字符串,而是Vue自定义的划定界限的符号。
{{}}
代表的就是""
,所以在v-text=""
中,我们在内容里面就不需要再写{{}}
了,直接写数据属性就行了。
2-2 :{{}}和v-text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-for = "item in items">{{item.name}}</div>
<div v-for = "item in items" v-text ="item.name"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
items:[{
name:"susan1"
},{
name:'susan2'
},{
name:'susan3'
}
]
}
})
</script>
</body>
</html>
結果為:
susan1
susan2
susan3
susan1
susan2
susan3
PS:可以看出{{}}
方法可以采用对象的形式传递多个数据。其实在v-text
中,也具备同等的功能。
Vue中的v-text
等同于文本插值{{}}
方法,也类似于JavaScript中的textContent
。
总结
在Vue中,我们可以使用{{}}
将数据插入到相应的模板中,这种方法是一种文本插值。使用这种方法,如果网络慢或者JavaScript出错的话,会将{{}}
直接渲染到页面中。值得庆幸的是,Vue还提供了v-text
和v-html
来渲染文本或元素。其中v-text
和{{}}
类似,只是用来渲染文本内容,而v-html
和innerHTML
非常相类,可以将HTML元素渲染。
简单说,这篇文章主要介绍了怎么渲染文本,虽然方法有多种,但个人建议不要使用v-html
,因为会引起XSS攻击,对于动态渲染应该尽量使用v-text
。
原文: https://www.w3cplus.com/vue/v-text-and-v-html.html © w3cplus.com