Vue 條件渲染v-if和v-show

v-if

v-if、v-else-if、v-else

• 這三個指令與JavaScript的條件語句if、else、else if類似。
• Vue的條件指令可以根據表達式的值在DOM中渲染或銷毀元素或元件

簡單的案例示範

v-if的原理：

• v-if後面的條件為false時，對應的元素以及其子元素

  不會渲染

  。
• 也就是根本沒有不會有對應的标簽出現在DOM中。

在 template 元素上使用 v-if 條件渲染分組

因為

v-if

是一個指令，是以必須将它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個

<template>

元素當做不可見的包裹元素，并在上面使用

v-if

。最終的渲染結果将不包含

<template>

元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</templatehtml
           

用 key 管理可複用的元素

Vue 會盡可能

高效地渲染元素

，通常會

複用已有元素

而不是從頭開始渲染。這麼做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許使用者在不同的登入方式之間切換

小問題

• 如果我們在有輸入内容的情況下，切換了類型，我們會發現文字依然顯示之前的輸入的内容。
• 但是按道理講，我們應該切換到另外一個input元素中了。
• 在另一個input元素中，我們并沒有輸入内容。
• 為什麼會出現這個問題呢？

問題解答

• 這是因為Vue在進行DOM渲染時，出于

  性能考慮

  ，會盡可能的

  複用已經存在的元素，而不是重新建立新的元素

  。
• 在上面的案例中，Vue内部會

  發現原來的input元素不再使用

  ，直接作為else中的input來使用了。

解決方案

• 如果我們不希望Vue出現類似重複利用的問題，可以給對應的input添加key
• 并且我們需要保證key的不同
• 也可以加上需要重置的屬性 如在input上加上value ，雖然還是會被複用，但是在複用時也會重置value屬性的屬性值。

v-show

另一個用于根據條件展示元素的選項是

v-show

指令。用法大緻一樣：

不同的是帶有

v-show

的元素始終會被渲染并保留在 DOM 中。

v-show

隻是簡單地切換元素的 CSS property

display

。

注意

，

v-show

不支援

<template>

元素，也不支援

v-else

。

v-if

vs

v-show

• v-if

  是“真正”的條件渲染，因為它會確定在切換過程中條件塊内的事件監聽器和子元件适當地被銷毀和重建。

• v-if

  也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。
• 相比之下，

  v-show

  就簡單得多——不管初始條件是什麼，元素總是會被渲染，并且僅僅是将元素的display屬性設定為none而已

一般來說

，

v-if

有更高的

切換開銷

，而

v-show

有更高的

初始渲染開銷

。

• 如果需要非常

  頻繁地切換

  ，則使用

  v-show

  較好；
• 如果在運作時

  條件很少改變

  ，則使用

  v-if

  較好。