vue的v-if、v-show_v-show v-if 动画-优快云博客

本文链接：https://blog.youkuaiyun.com/LLL_liuhui/article/details/90206167

本文深入探讨了Vue.js中v-if、v-show、v-else及v-else-if指令的使用，解析它们在条件渲染场景下的表现差异，包括DOM节点的创建与移除机制，以及在频繁显示隐藏操作中的性能考量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 如果是v-if:  不会一直存在dom节点中，而是通过表达式的true/false创建/移除节点-->
			<div v-if="show">{{msg}}</div> 
			<!-- 如果是v-show 会一直存在dom节点中，表达式的显示true/false是控制节点的display:block/none; 如果是频繁的显示隐藏，那么v-show的性能更好些-->
			<div v-show="show">{{msg}}</div>
			
			<!-- v-if条件判断语句，通过表达式的结果判断显示那一个dom节点，v-else必须在v-if节点后面，如果中间有元素会报错-->
			<div v-if="sun">sun</div>
			<div v-else>cloudy</div>
			
			<!-- v-if,v-else-if语句，通过表达式的结果判断显示那一个dom节点，v-else必须在v-if节点后面，如果中间有元素会报-->
			<div v-if="num==='1'">1</div>
			<div v-else-if="num==='2'">2</div>
			<div v-else="num==='3'">3</div>
			
			<!-- 如果相同时切换多个元素，可以使用template元素包裹，显示的时候不会显示template元素 -->
			<!-- 注意：v-show不支持template元素，也不支持v-else -->
			<template v-if="show">
				<div>111111</div>
				<div>222222</div>
				<div>333333</div>
			</template>
			<template v-else>
				<div>4444</div>
				<div>5555</div>
				<div>6666</div>
			</template>
		</div>
		<script>		
			let app = new Vue({
				el: '#app',
				data: {
					show: false,
					msg: 'hello world',
					sun: false,
					num: 2
				},
			})
		</script>
	</body>
</html>