您的位置：首页 > Web前端 > Vue.js

VUE条件语句

2021-01-10 22:16 651 查看

随机生成一个数字，判断是否大于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 指令来根据条件展示元素。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航