v-cloak、v-text和v-html之间的区别

最新推荐文章于 2024-03-08 15:26:58 发布

朽木自雕xmzd

最新推荐文章于 2024-03-08 15:26:58 发布

阅读量310

点赞数 1

分类专栏：前端 # vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_16687863/article/details/103070291

版权

前端同时被 2 个专栏收录

107 篇文章 2 订阅

订阅专栏

vue

34 篇文章 0 订阅

订阅专栏

v-cloak、v-text和v-html这三个都能进行数据渲染，他们之间有什么相同点和不同点呢？

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-cloak>-----{{ msg }}++++++++</p>
			<p v-text="msg">+++++++</p>
			<p v-html="msg">++++++++</p>
			<p>----------------------------</p>
			<p v-cloak>{{ msg2 }}</p>
			<p v-text="msg2"></p>
			<p v-html="msg2"></p>
		</div>
		<!-- 将vue.js放在下面模拟网络拥堵的情况 -->
		<script src="vue/vue.js"></script> 
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "123",
					msg2: "<h1>hello</h1>"
				}
			});
		</script>
	</body>
</html>

效果图：

根据这张图我们来看下这三个的区别：

v-cloak：

使用方式：（插值表达式）
```
<p v-cloak>{{ msg }}</p>
```
当网络较慢或拥堵时，会出现插值表达式闪烁的现象（见上图），也就是会出现{{ msg }}这个文本，因为数据暂时没有加载出来，解决办法：使用属性选择器，设置display: none。
```
<style>
	[v-cloak]{
		display: none;
	}
</style>
```
可以在插值表达式周围插入其他字符
当放入的数据含有HTML标签时，会将该标签当做文本显示出来

v-text：

使用方法：
```
<p v-text="msg"></p>
```
当网络不佳时，不会出现闪烁情况
当在标签内加入其他文本时，当数据加载完毕后，会将标签内的文本覆盖掉
当放入的数据含有HTML标签时，会将该标签当做文本显示出来

v-html：

使用方法
```
<p v-html="msg"></p>
```
当网络不佳时，不会出现闪烁问题
当在标签内加入其他文本时，当数据加载完毕后，会将标签内的文本覆盖掉
当放入的数据含有HTML标签时，浏览器会解析该标签，如上图的Hello变大了

朽木自雕xmzd

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-cloak、v-text和v-html之间的区别

v-cloak、v-text和v-html这三个都能进行数据渲染，他们之间有什么相同点和不同点呢？代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> ...
复制链接

扫一扫