在 元素上使用 v-if 條件渲染分組
因為 v-if 是一個指令，需要新增到一個元素上。要是想讓多個元素都可以實現條件渲染，而不一個個給每一個標籤加上v-if指令，應該怎麼做呢？此時可以把一個 元素當做不可見的包裹元素，並在上面使用 v-if。最終使多個標籤同時具有了相同的條件渲染

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

 <script>
 	new Vue({
      el: '#app',
data: {
    ok:false
}

   })
  
   </script>
 

v-else

你可以使用 v-else 指令來表示 v-if 的“else 塊”：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。

v-else-if

相當於 if（） --else if—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>
 

類似於 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之後。

用 key 管理可複用的元素

Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。這麼做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許使用者在不同的登入方式之間切換：

<div id="app" >
	<form>
<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>
<button type="submit">login</button>
</form>
<h1 v-show="ok">Hello!</h1>
</div>

 <script>
 	new Vue({
      el: '#app',
data: {
    loginType:'true',
   
}

   })
  
   </script>
 

改變上述程式碼中loginType 的值將不會清除使用者已經輸入的值，因為兩個模組使用咯額相同的元素，而在實際開發過程中切換使用者的登入的方式之後，則是已經清除掉了原來登入方式的值，要實現這個過程則需要給每個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-show 指令。用法大致一樣：

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

v-if vs v-show

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

v-if 與 v-for 一起使用

當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先順序。