vue中的条件渲染

v-if

v-if是一个指令，须要添加在元素上使用。能够与v-else、v-else-if配套使用，v-else、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-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

想要多个元素切换时，能够用template标签包裹起来，并在template标签上使用v-if指令，最终渲染出来不会有template标签。

v-if会复用已有的元素

为了高效的渲染元素，v-if会复用已有元素而不是从头开始渲染。例如：

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

当在input中输入文字，再切换到email登录时，输入框中的值不回清空，由于元素没有从新渲染，然是仅仅改变了placeholder中的值。一样label标签也没有从新渲染，然是仅仅改变了label中的文本。

想要元素不被复用时，只须要在元素中添加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>

此时input不会被复用，label仍被复用。

v-show

v-show和v-if使用方法同样，做为一个指令使用。 但是v-show控制的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display，在条件不成立时display属性为none。v-show 不支持 template 语法。

v-if 和 v-show的区别

• v-if 是“真正”的条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 也是惰性的，若是在初始渲染时条件为假，则什么也不作——直到条件第一次变为真时，才会开始渲染条件块；v-show无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。
• v-if 切换开销更高，而 v-show 的初始渲染开销更高。