天天看點

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>
           

繼續閱讀