当前位置：网站首页>2.3 branch statements

2.3 branch statements

2022-07-21 16:05:00 【Qwe7】

2.3 Branch statement

Vue Branch statement in v-if Very easy to understand , Logical heel Java Medium if-else identical .v-if The statement block contains the following ：

1.v-if

2.v-else

3.v-else-if

Next, take a simple example to understand ：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-if="flag">
				 The weather is very comfortable today ！
			</p>
			<p v-else-if="rich">
				 It's hot and dry today ！ I'm going to relax in the evening ！
			</p>
			<p v-else="rich">
				 At night, I can only hi ！
			</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 and v-show There seems to be the same effect between , But there are differences in optimization . Let's look at the following example ：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<p v-show="rich">
				 rich ！
			</p>
			<p v-if="rich">
				 rich ！
			</p>
			<button type="button" @click="rich=!rich"> Tonight's lottery </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>

By clicking on “ Tonight's lottery ” Button , Can switch rich Value , At this time, we found that ,v-if and v-show The display status of will switch back and forth . It looks the same , But by looking at the console code ,v-show Will actually p Labeled css Styling display Property set to none To achieve the hidden effect .

and v-if Is to add and delete... Directly on the page p Label to achieve the effect , therefore v-show In the application scenario of repeated switching , Efficient than v-if Higher .

原网站

版权声明
本文为[Qwe7]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/202/202207202059160873.html

当前位置：网站首页>2.3 branch statements

2.3 branch statements

2.3 Branch statement

边栏推荐

猜你喜欢

随机推荐