Vue中v-show与v-if的区别

最新推荐文章于 2024-04-14 10:00:00 发布

朱振玉小迷弟

最新推荐文章于 2024-04-14 10:00:00 发布

阅读量120

点赞数 1

分类专栏： Vue学习笔记（带源码）文章标签： vue js

本文链接：https://blog.csdn.net/weixin_50357864/article/details/114791299

版权

Vue学习笔记（带源码）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、官方解释：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

二、源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="切换显示" @click="toggleIsShow">
			<p v-if="isShow">繁华落尽千杯雪</p>
			<p v-show="isShow">繁华落尽千杯雪 - v-show修饰</p>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app =new Vue({		//这里的new很重要，丢了会让下面的函数无法运行，别问我怎么知道的
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					toggleIsShow:function(){
						this.isShow = !this.isShow;
					}
				},
			})
		</script>
	</body>
</html>

有用的话点个赞👍哈~

朱振玉小迷弟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中v-show与v-if的区别

一、官方解释：v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则
复制链接

扫一扫