vue使用v-if v-show页面闪烁，div闪现的解决方法

最新推荐文章于 2022-12-11 00:16:06 发布

woshidamimi0

最新推荐文章于 2022-12-11 00:16:06 发布

阅读量1.1w

点赞数 4

分类专栏： vue 文章标签： div闪现页面元素闪现

本文链接：https://blog.csdn.net/woshidamimi0/article/details/82851036

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。

可以在根元素添加v-cloak来解决，并且设置它的样式即可。

代码只是示例，还需要自己修改测试。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/* 在引入的css文件中写入这个*/
		[v-cloak]{
			display: none;
		}
	</style>
</head>
<body>
	<!-- 添加这个v-cloak -->
	<div id='app' v-cloak>
		<div v-if="isShow">
		content
		</div>
	</div>
</body>
</html>
<<script>
	new Vue({
		el: '#app',
		data () {
			return {
				isShow: false
			}
		}
	})
</script>

优惠劵

woshidamimi0

关注关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
vue使用v-if v-show页面闪烁，div闪现的解决方法

在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。可以在根元素添加v-cloak来解决，并且设置它的样式即可。代码只是示例，还需要自己修改测试。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;titl
复制链接

扫一扫