vue的v-if、v-show

本文深入探讨了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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值