共计 1134 个字符，预计需要花费 3 分钟才能阅读完成。
使用方法
v-if：
<h1 v-if="xkd"> 侠课岛 </h1>template 中配合 v-if 条件渲染一整组：
<template v-if="a">
<h1>Title</h1>
<p>Paragraph one</p>
<p>Paragraph two</p>
</template>使用 v -else 指令来表示 v-if 的 else，v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面，否则它将不会被识别：
<h1 v-if="a">True</h1>
<h1 v-else>FALSE</h1>多次使用 v-if：
<h1 v-if="color =='red'"style="color: red;"> 红 </h1>
<h1 v-else-if="color =='green'"style="color: green;"> 绿 </h1>
<h1 v-else="color =='blue'"style="color: blue;"> 蓝 </h1> 如图所示：
key 管理可复用的元素
通常会复用已有元素而不是从头开始渲染（就近原则），key 使得 Vue 渲染速度会变得非常快。
下面是 key 的使用方法：
<body>
<div id="main">
<template v-if="loginType ==='username'">
<label> 用户名 </label>
<input placeholder="请输入用户名" key="username-input" />
</template>
<template v-else>
<label> 邮箱 </label>
<input placeholder="请输入邮箱" key="email-input" />
</template>
<input type="button" value="切换" v-on:click="changeType" />
</div>
</body>
<script>
var vm = new Vue({
el: '#main',
data: {'loginType': 'username'},
methods: {changeType: function() {if (this.loginType == 'username') {this.loginType = 'email';} else {this.loginType = 'username';}
}
}
})
</script>
v-show vs v-if
v-show：
<h1 v-show="xkd">Hello!</h1>v-show：比较简单，不管初始条件是什么，元素总是会被渲染，并且只是简单的基于 CSS 进行变换。初始渲染开销较大。
v-if：有更高的切换开销。
如果需要非常频繁的切换，那么使用 v -show 比较好；如果在运行条件不太可能改变的情况下，则使用 v -if 较好。
正文完
