2.3 分支语句

Qwe7

发布于 2022-07-20 20:09:05

27700

代码可运行

文章被收录于专栏：网络收集网络收集

运行总次数：0

代码可运行

2.3 分支语句

Vue中的分支语句v-if非常好理解，逻辑跟Java中的if-else相同。v-if语句块包含以下内容：

1.v-if

2.v-else

3.v-else-if

接下来以一个简单例子即可理解：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-if="flag">
				今天天气很舒服！
			</p>
			<p v-else-if="rich">
				今天天气很燥热！晚上要去放松一下！
			</p>
			<p v-else="rich">
				晚上只能自嗨！
			</p>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script>
		new Vue({
			el:'#app',
			data:{
				flag:false,
				rich:false
			},
			methods:{	
			}
		});	
	</script>
</html>

v-if和v-show之间有着看似相同的效果，但优化上却有区别。先看下面这个例子：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<p v-show="rich">
				有钱！
			</p>
			<p v-if="rich">
				有钱！
			</p>
			<button type="button" @click="rich=!rich">今晚彩票开奖</button>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script>
		new Vue({
			el:'#app',
			data:{
				flag:false,
				rich:false
			},
			methods:{	
			}
		});
	</script>
</html>

通过点击“今晚彩票开奖”按钮，能切换rich的值，此时发现，v-if和v-show的显示状态都会来回切换。看起来是一样的，但通过查看控制台代码发现，v-show实际会将p标签的css样式的display属性设为none来达到隐藏的效果。

而v-if是直接在页面上添加和删除p标签来达到效果，因此v-show在反复切换的应用场景下，效率比v-if更高。

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

java