Vue v-else 指令
示例
使用 v-else 指令，在上方所有條件都為“false”時建立一個 <div> 元素。
<p v-if="word === 'apple'">The word is 'apple'.</p>
<p v-else-if="word === 'pizza'">The word is 'pizza'</p>
<div v-else>
<img src="/img_question.svg" alt="question mark">
<p>The word is not 'apple', and it is not 'pizza'</p>
</div>
更多示例請參見下方。
定義和用法
當 if 語句中上方所有條件求值為 'false' 時，v-else 指令用於渲染一個元素。
v-else 指令只能在具有 v-if 或 v-else-if 的元素之後使用。
v-else 指令在沒有表示式的情況下使用。
v-else 導致元素切換
- 我們可以使用內建的
<Transition>元件來為元素進入和離開 DOM 時新增動畫。 - 生命週期鉤子（如 'mounted' 和 'unmounted'）會被觸發。
條件渲染指令
本概述描述了用於條件渲染的不同 Vue 指令是如何協同工作的。
| 指令 | 詳情 |
|---|---|
v-if |
v-if 可以單獨使用，也可以與 v-else-if 和/或 v-else 結合使用。如果 v-if 中的條件為“true”，則不考慮 v-else-if 或 v-else。 |
v-else-if |
必須在 v-if 或另一個 v-else-if 之後使用。如果 v-else-if 中的條件為“true”，則不考慮後續的 v-else-if 或 v-else。 |
v-else |
如果 if 語句的第一個部分為 false，則會執行此部分。必須放在 if 語句的最後，在 v-if 和 v-else-if 之後。 |
更多示例
示例 1
當打字機計數為 0 時，使用 v-else 編寫“缺貨”。
<p v-if="typewriterCount>3">
有貨
</p>
<p v-else-if="typewriterCount>0">
所剩不多！
</p>
<p v-else>
缺貨
</p>
自己動手試一試 »
示例 2
當句子不包含 'pizza' 或 'burrito' 時，使用 v-else 顯示特定文字。
<div id="app">
<div v-if="text.includes('pizza')">
<p>文字包含“pizza”一詞</p>
<img src="img_pizza.svg">
</div>
<div v-else-if="text.includes('burrito')">
<p>文字包含“burrito”一詞，但不包含“pizza”</p>
<img src="img_burrito.svg">
</div>
<p v-else>文字中未找到“pizza”或“burrito”一詞</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
相關頁面
Vue 教程：Vue v-if 指令
Vue 參考：Vue v-if 指令
Vue 參考：Vue v-else-if 指令
Vue 教程: Vue 動畫
Vue 教程：Vue 生命週期鉤子
