v-if和v-show区别

最新推荐文章于 2022-09-03 11:20:26 发布

憨憨在奔跑

最新推荐文章于 2022-09-03 11:20:26 发布

阅读量131

点赞数

分类专栏：学习笔记文章标签： vue html js

本文链接：https://blog.csdn.net/weixin_42496905/article/details/119256112

版权

学习笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文通过实例代码对比分析了 Vue 中 v-if 和 v-show 的使用区别。v-if 在条件为假时，元素会完全从 DOM 中移除，而 v-show 则通过 CSS 的 display 属性来隐藏元素。根据条件切换的频繁程度选择使用，频繁切换适合 v-show，不常变化则推荐 v-if。

摘要由CSDN通过智能技术生成

v-if和v-show区别

一言不合上代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>v-if和v-show</title>
</head>
<body>
	<div id="app">
		<div v-if="true">1111</div>
		<div v-show="true">2222</div>
		
		<div v-if="false">3333</div>
		<div v-show="false">4444</div>
	</div>
	<script src="js/vue.js"></script>
	<script>
		new Vue({
			el:'#app'
		})
	</script>
</body>
</html>

输出结果：
在这里插入图片描述
可以清晰看到，当v-if和v-show为true时，元素显示；
当v-if为false时，元素消失；而v-show为false时，元素隐藏。

v-if和v-show的区别：

v-if 当值为 true时，显示div ，当值为false时，改元素***消失***，代码也会消失，相当于将代码删除了，当z值再次从false变为true时，页面会重新渲染div;
v-show当值为true时候，显示div ，当值为false时，改元素***隐藏***，并且该元素css属性设为了display：none 或block;
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。