【四二學堂】條件渲染(vue系列入門示例之十三)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			
			<div v-if="type==='A'">
				A
			</div>
			<div v-else-if="type==='B'">
				B
			</div>
			<div v-else-if="type==='C'">
				C
			</div>
			<div v-else-if="type==='D'">
				D
			</div>
			<div v-else>
				No A/B/C
			</div>
			
		</div>
		
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					type:'A'
				}
			});
			
		</script>
		
		<style>
			
		</style>
	</body>
</html>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章