條件渲染
v-if
指令v-if用於條件性地渲染一個塊。只有當指令的表示式返回一個真值時，該塊才會被渲染。
template
<h1 v-if="awesome">Vue is awesome!</h1>v-else
您可以使用v-else指令來指示v-if的“else塊”
template
<button @click="awesome = !awesome">Toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>Vue很棒！
v-else元素必須立即跟在v-if或v-else-if元素之後——否則它將不會被識別。
v-else-if
正如其名所示，v-else-if充當了v-if的“else if塊”。它也可以多次鏈式使用
template
<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元素之後。
v-if在
因為v-if是一個指令，它必須附加到一個單一元素上。但如果我們想切換多個元素呢？在這種情況下，我們可以在元素上使用v-if，它充當一個不可見的包裝器。最終的渲染結果將不包括元素。
template
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>v-else和v-else-if也可以用於。
v-show
另一種條件性地顯示元素的選項是v-show指令。其用法在很大程度上是相同的
template
<h1 v-show="ok">Hello!</h1>不同之處在於，具有v-show的元素總是會渲染並保留在DOM中；v-show僅切換元素的display CSS屬性。
v-show不支援<template>元素，也不與v-else一起使用。
v-if與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-if 和 v-for 時，v-if 將首先被評估。有關詳細資訊，請參閱 列表渲染指南。