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 的初始渲染開銷更高。