<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="./vue.js"></script>
	<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="app" style="height:360px;border:1px solid red"  @click="handleClick">

	//v-show:已经渲染，只是隐藏或显示<br>
	<div v-if="show">{{message}}</div>
	//v-if:存在或不存在(移除)。很显然v-show性能更高，它不用删除、添加<br>
	<div v-show="show">{{message}}</div>

	//if else语句<b style="color:red">(注意，if、else标签之间不能有阻隔，否则报错)</b>：<br>
	<div v-if="show">if</div>
	<div v-else="show">else</div>

	//if else ifelse(同样要连在一起写)<br>
	<div v-if="show == 'a'">a</div>
	<div v-else-if="show == 'b'">b</div>
	<div v-else="show">other</div>

	//一个诡异的现象：帐号、邮箱再怎么切换，input中输入的内容不变(vue会尽量复用，但是并没有清空内容)<br>
	<div v-if="show">
		帐号:<input type="text" name="account"/>
	</div>
	<div v-else>
		邮箱:<input type="text" name="email"/>
	</div>
	//解决办法是加key(当给一个元素加key值的时候，vue会知道它是唯一元素，如果不一样则不复用值)<br>
	<div v-if="show">
		帐号:<input type="text" name="account" key="account" />
	</div>
	<div v-else>
		邮箱:<input type="text" name="email" key="email" />
	</div>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			show: false,
			message: "hello world"
		},
		methods: {
			handleClick: function() {
				this.show = !this.show
			}
		}
	});
</script>
</body>
</html>