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。