05_Vue指令篇之文本内容指令

最新推荐文章于 2023-07-28 15:18:47 发布

嫣夜来

最新推荐文章于 2023-07-28 15:18:47 发布

阅读量696

点赞数 2

分类专栏： Vue前端框架

本文链接：https://blog.csdn.net/qq_41865652/article/details/100978325

版权

Vue前端框架专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1 v-text 纯文本指令

主要作用：替换元素内的内容

1.1 v-text 实例演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01_vue指令文本内容_v-text</title>
</head>
<body>
	<!-- v-text指令的使用步骤：
		1、引入vue.js
		2、实例化Vue对象
		3、在需要显示data中数据的元素标签内增加v-text="text", text代表data中的属性key值
		4、当浏览器加载渲染html时就会把text的具体取值显示到标签的文本内容中，替换之前显示的文本内容。
	 -->
	<div class="app" v-text="text">
		<span v-text="text">v-text指令的主要作用在于替换标签的内容</span>
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
	var app = new Vue({
		el:'.app',
		data: {
			text:'hello world',
		},
	});
</script>
</html>

结果如下图：
在这里插入图片描述

2 v-html 文本指令

主要作用：在于替换标签的内容, 如果替换字符串中含有html标签元素，会被解析

1.1 v-html 实例演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>02_vue指令文本内容_v-html</title>
</head>
<body>
	<!-- v-html指令的使用步骤：
		1、引入vue.js
		2、实例化Vue对象
		3、在需要显示data中数据的元素标签内增加v-html="text", text代表data中的属性key值
		4、当浏览器加载渲染html时就会把text的具体取值显示到标签的文本内容中，替换之前显示的文本内容。
	 -->
	<div class="app" v-html="text">
		<span v-text="text">v-html指令的主要作用在于替换标签的内容, 如果替换字符串中含有html标签元素，会被解析</span>
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
	var app = new Vue({
		el:'.app',
		data: {
			text:'<h1>hello world!</h1>',
		},
	});
</script>
</html>

结果如下图：
在这里插入图片描述

3 v-text 和 v-html 的区别

v-text指令只替换文本内容，如果是HTML代码段也不会被解析；v-html指令在替换文本内容时，如果目标内容不是纯文本，是一段HTML代码段会被浏览器解析渲染。

4 使用注意事项

1）v-text指令是更新元素的 textContent（完全替换）。如果要实现更新元素部分的 textContent需求，请使用 {{ }} 插值进行操作；
2）v-html指令在网站上动态渲染任意 HTML 是非常危险的，因为容易导致XSS 攻击。只在可信内容上使用 v-html，永远不要在用户提交的内容上使用；