3.Vue指令：v-text、v-html

最新推荐文章于 2024-05-24 22:59:31 发布

高新园养鸡场

最新推荐文章于 2024-05-24 22:59:31 发布

阅读量277

点赞数

分类专栏： Vue 2.0 文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/zyc3545/article/details/108153229

版权

Vue 2.0 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

用法

<p v-text="msg"></p>
<p v-html="msg"></p>

插值表达式、v-text、v-html显示字符串

<body>
	<div id="content">
		<p v-cloak>1111{{msg}}2222</p>
		<p v-text="msg">111</p>
		<p v-html="msg">111</p>
	</div>
</body>
<script>
	var vm = new Vue({
		el:"#content",
		data:{
			msg:"这是我要的内容",
		}
	});
</script>

运行：
在这里插入图片描述

插值表达式、v-text、v-html显示带html标签字符串

	<body>
		<div id="content">
			<p v-cloak>1111{{txt}}2222</p>
			<p v-text="txt">111</p>
			<p v-html="txt">111</p>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#content",
			data:{
				txt:"<h1>这是text内容</h1>"
			}
		});
	</script>

运行：
在这里插入图片描述

分析比较

v-text

不会有闪烁问题，原因在于其文本内容放置于属性中，而不在标签内容中。
不会解释html标签。
会覆盖标签中内容。

v-html

不会有闪烁问题，原因在于其文本内容放置于属性中，而不在标签内容中。
可以解释html，不过解释html标签可能导致xss攻击。
会覆盖标签中内容。

插值表达式

有闪烁问题，需要通过v-cloak指令解决。
不会解释html标签。
不会覆盖标签中内容。

高新园养鸡场

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.Vue指令：v-text、v-html

v-textv-text不会有闪烁问题，原因在于其文本内容放置于属性中，而不在标签内容中。v-text不会解释html。<body> <div id="content"> <p v-text="txt"></p> </div></body><script> var vm = new Vue({ el:"#content", data:{ txt:"<h1>这是text内容<
复制链接

扫一扫