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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/woshidamimi0/article/details/82851036

在页面层次结构,数据较多的时候,用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>

猜你喜欢

转载自blog.csdn.net/woshidamimi0/article/details/82851036