Vue中条件渲染v-if和v-show有什么区别

最新推荐文章于 2023-02-07 06:16:29 发布

原创最新推荐文章于 2023-02-07 06:16:29 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架

关于框架同时被 3 个专栏收录

8 篇文章

订阅专栏

猿生海海

8 篇文章

订阅专栏

Vue.js

6 篇文章

订阅专栏

本文深入探讨了Vue.js中v-if与v-show指令的区别，分析了它们在条件渲染时的工作原理，包括DOM元素的存在与否、事件监听器及子组件的处理方式。v-if在条件变化时会销毁和重建DOM，而v-show则通过CSS切换元素的显示状态。

v-if

	<body>
		<div id="app">
			<div v-if="isShow">
				helllo Vue
			</div>
			<template v-if="isShow">
				<p>hello world</p>
				<div>hello shimao</div>
				<span>www.shimao.org</span>
			</template>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					isShow:false
				}
			})
		</script>
	</body>

查看DOM发现当isShow为false时对应DOM元素是不存在的

v-show

	<body>
		<div id="app">
			<div v-show="isShow">
				helllo Vue
			</div>
			<!-- v-show 不支持template -->
			<template v-show="isShow">
				<p>hello world</p>
				<div>hello shimao</div>
				<span>www.shimao.org</span>
			</template>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					isShow:false
				}
			})
		</script>
	</body>

同样查看DOM,v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

同时可以看出 v-show 不支持 <template> 元素，也不支持 v-else。