vue 条件渲染

最新推荐文章于 2023-04-07 22:52:40 发布

原创最新推荐文章于 2023-04-07 22:52:40 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文深入探讨了Vue.js中v-if与v-show指令的区别及应用，解析了它们在DOM渲染和性能优化上的作用。通过实例展示了如何利用这些指令进行条件渲染，以及在不同场景下选择v-if或v-show的考量。

vue 中给某个dom元素一个key值，当它准备复用该dom时，若key值不一样，便不会去复用。

在需要频繁显示隐藏 dom 时，使用v-show性能要高一些。

命令： v-if 该值，决定了其所在的div是否真实地被挂载到页面之上。

	<div v-if="show">{{message}}</div>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				show: false,
				message: "hello world"
			}
		})
	</script>

命令：v-show 该值，决定了display 是none 还是非none。不管是否显示，其所在dom都被渲染到页面之上。

	<div id="app">
		<div v-if="show">{{message}}</div>
		<div v-show="show">{{message}}</div>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				show: false,
				message: "hello world"
			}
		})
	</script>

if 与 else 一起使用：（要紧贴一起使用）

		<div v-if="show">{{message}}</div>
		<div v-else>Bye world</div>

多个else语句：

	<div id="app">
		<div v-if="show === 'a'">{{message}}</div>
		<div v-else-if="show === 'b'">this is b</div>
		<div v-else>Bye world</div>
		<!-- <div v-show="show">{{message}}</div> -->
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				show: 'b',
				message: "hello world"
			}
		})
	</script>