天天看点

VUE条件语句

随机生成一个数字,判断是否大于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>
           

继续阅读