v-if
v-if 实现按条件渲染目标
<div v-if="ok">yes</div>
#在<template>元素上使用v-if
当分组渲染时，将<template>元素作为不可见的包裹元素，并在上面使用v-if，实现分组条件渲染。
#v-else
v-else必须在v-if或者v-else-if后。
<div v-if="ok">yes</div>
<div v-else>no</div>
#v-else
2.1.0新增
v-else-if必须在v-if或者v-else-if后，可连用。
<div v-if="type == 'A' ">A</div>
<div v-else-if="type == 'B' ">B</div>
<div v-else>not A/B</div>
#用key管理可复用的元素
Vue的渲染机制：复用已有元素，提高算然速度。
下面例子：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
当切换显示时，<label>和<input>都不会销毁，仅仅是改变了不同的html属性（<label>的text和<input>的placeholder），因此<input>的内容不会改变。
当两个元素应当完全独立时，只要赋予不同的key属性，就可以了。
<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>
v-show
和v-if类似，v-show可以实现条件渲染。
不过区别是：v-show不管条件如何，都会将元素渲染，只是简单切换css属性display。
注意：v-show不支持<template>元素和v-else.
v-show vs v-if
v-if 与 v-for 同时使用
不推荐同时使用 v-if 与 v-for。
当 v-if 与 v-for同时使用时，v-for 的优先级高于 v-if。
