二、條件渲染

1. v-if 操作的是 DOM 存在與否, v-show 操作的 DOM 的 display 樣式屬性
2. 性能

• v-show 有較高的渲染開銷
• v-if 有更高的切換開銷
• 如果頁面頻繁切換，使用 v-show ；如果運行時條件很少改變，使用 v-if

1 v-if

// v-if 指令用于條件性地渲染一塊內(nèi)容。這塊內(nèi)容只會在指令的表達式返回 truthy 值的時候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
// v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。
<h1 v-else>Oh no ??</h1>
// v-else-if，顧名思義，充當(dāng) v-if 的“else-if 塊”，可以連續(xù)使用：
<div v-else>
  Not A/B/C
</div>

2 v-show

// v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS property display
// v-show 不支持 <template> 元素，也不支持 v-else
<h1 v-show="ok">Hello!</h1>

3 v-if vs v-show

v-if 是"真正"的條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。

4 v-if 與 v-for 一起使用

當(dāng) v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優(yōu)先級