拼搏30天VUE.js之v-text和v-html（Part6）

最新推荐文章于 2024-05-11 07:19:05 发布

那是遇知吧

最新推荐文章于 2024-05-11 07:19:05 发布

阅读量178

点赞数 1

分类专栏： VUE.js

本文链接：https://blog.csdn.net/weixin_41406727/article/details/88597457

版权

VUE.js 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中的v-text和v-html指令，阐述了它们的区别和用法。v-text主要用于渲染纯文本，等同于双大括号语法；而v-html则可以插入HTML代码，但可能导致XSS攻击，应当谨慎使用。

摘要由CSDN通过智能技术生成

簡單回顧：

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: Message

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: Message

Using v-html directive: Message

Using v-html directive: Message

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

那是遇知吧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拼搏30天VUE.js之v-text和v-html（Part6）

簡單回顧：JavaScript相关知识点在JavaScript中有textContent、innerHTML、innerText、outerText、outerHTML和nodeValue。这些属性都可以用来获取某个元素的内容，也可以将内容或标签插入到某个元素中。看上去和渲染内容有点相关。简单的理解一下这几个属性：innerHTML：获取从对象的起始位置到终止位置的全部内容，包括H...
复制链接

扫一扫

专栏目录