主要掌握内容如下：
1,v-if 用于条件性地渲染一块内容
2,在template元素上使用 v-if 条件渲染分组 最终的渲染结果将不包含 template>元素
3,v-else 你可以使用 v-else 指令来表示 v-if 的“else 块”
4,v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
5,用 key 管理可复用的元素
6,v-show 只是简单地切换元素的 CSS 属性 display。
项目中用的最多的是template和 v-show
<!doctype html>
<html lang="gbk">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My First VUE page</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h2>v-if</h2>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no</h1>
<h2>template元素</h2>
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<h2>v-else</h2>
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
<h2>v-else-if</h2>
<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>
Not A/B/C
</div>
<h2>用key 管理可复用的元素</h2>
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
<br/>
<button @click="toggle()">Toggle login type</button>
<h2>v-show</h2>
<h1 v-show="ok">Hello!</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
awesome: false,
ok:false,
type:'D',
loginType:'username'
},
methods:{
toggle(){
this.loginType=this.loginType=='username'?'email':'username';
}
}
})
</script>
</body>
</html>
