vue里面v-if和v-show的区别_v-if="roleisadmin === false-CSDN博客

本文链接：https://blog.csdn.net/jsmylo/article/details/123774306

vue里面v-if和v-show的区别：
（1）v-if的true值控制是否会生成VNode，进而生成真是的dom树。当v-if的值为true的时候，会生成相应vnode，进而生成dom树。当取值为false的时候，直接不生成vnode，因此也不会生成dom树。
看下面简单的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>搭建工程</title>
	</head>
	<body>
		<div id="box">
			<p v-if="status">I am v-if</p>
			<button @click="status = !status">v-if的切换</button>
		</div>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#box",
				data:{
					status:true
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

点击按钮改变v-if的值。dom里面的差别：
v-if的值为true:
在这里插入图片描述
v-if的值为false:

（2）v-show不管其值为true或者为false。都会生成vnode，进而生成dom树。其控制元素显示隐藏是通过元素上面的style样式（display:none）来进行控制。
上截图：
v-show为true的时候：
在这里插入图片描述
v-show的值为false的时候：

通过图片对比就可以看出区别。v-show时dom树是存在的。