vue条件渲染

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。所谓truty值，和true有一些区别：

MDN解释为：在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。
相应地，可以用 v-else 和v-else-if添加一个“else 块：

<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>

tips：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别

tips：对于需要对多个元素同时进行绑定的情况，可以使用一个template标签将多个元素包裹起来，实际渲染时不会渲染template标签

注意：Vue 使用虚拟DOM技术，通常会复用已有元素而不是从头开始渲染，以尽可能高效地渲染元素。因此下面的例子中，在切换登录方式时候，input标签被复用，因而input内的输入不会被清除。

<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>

没输入时切换：


输入123后切换：


为了解决这个问题，Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 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>

注意：label元素仍然会被高效地复用，因为它们没有添加 key 属性。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样。

<h1 v-show="ok">Hello!</h1>

与v-if不同的是，v-show是惰性渲染，他是通过将html标签的display属性设置为none来达到隐藏的作用。而v-if是真正的条件加载，他不会在html中渲染标签。

tips：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

注意：v-show 不支持 template元素，也不支持 v-else
注意：不推荐同时使用 v-if 和 v-for，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。详见：vue风格规范