VUE条件语句

算法
算法讲解
tea_year

随机生成一个数字,判断是否大于0.55,然后输出对应信息:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-else</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="Math.random()>0.5">
				大于0.55
			</div>
			<div v-else>
				不大于0.55
			</div>
		</div>
		<script>
			new Vue({
				el:'#app'
			})
		</script>
	</body>
</html>

 该案例针对随机产生的数字进行判断,从而显示对应的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-if-else2</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="type==='A'">
				A块
			</div>
			<div v-else-if="type==='B'">
				<h1 v-show="ok">ok.B</h1>
			</div>
			<div v-else-if="type==='C'">
				C块
			</div>
			<div v-else>
				其他块
			</div>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					type:'B',
					ok:true
				}
			})
		</script>
	</body>
</html>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后,注意不要都写成v-if,有三种形式。本处使用 v-show 指令来根据条件展示元素。

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读