master

分支 (1)

管理

管理

master

vue-demo
/
3-7-vue中的条件渲染.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue中的条件渲染</title>
	<script src="vue.js"></script>
</head>
<body>

	<!-- 第一种 -->
	<div id="root">
		<div v-if="show" data-set="v-if">{{message}}</div>
		<div v-show="show" data-test="v-show">{{message}}</div>
		<hr>
		<!-- v-if,v-else 要连在一起写 -->
		<div v-if="show">{{message}}</div>
		<div v-else>Bye World1</div>
		<hr>
		<!-- v-if,v-else-if,v-else 也要连在一起写 -->
		<div v-if="show1 === 'a'">This is A</div>
		<div v-else-if="show1 === 'b'">This is B</div>
		<div v-else>Bye World2</div>
	</div>
	<script>
		var vm = new Vue({
			el: '#root',
			data: {
				message: 'hello world',
				show: false,
				show1: 'a'
			}
		})
	</script>

	<hr>

	<!-- 第二种 key值 切换的时候要加上, 保证是唯一的元素, 不会被复用 -->
	<div id="root1">
		<div v-if="show">
			用户名: <input type="text" key="username">
		</div>
		<div v-else>
			邮箱名: <input type="text" key="password">
		</div>
	</div>
	<script>
		var vm1 = new Vue({
			el: '#root1',
			data: {
				show: 'false'
			}
		})
	</script>


</body>
</html>