Vue v-else 指令

示例

当上述所有条件均为'false'时，使用 v-else 指令创建 <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>

运行示例 »

请参阅下面的更多示例。

定义和用法

v-else 指令用于在 if 语句中上述所有条件计算结果为'false'的情况下渲染元素。

v-else 指令只能在带有 v-if 或 v-else-if 的元素之后使用。

v-else 指令在不使用表达式的情况下使用。

当 v-else 导致元素切换时:

我们可以使用内置的 <Transition> 组件在元素进入和离开 DOM 时设置动画。
触发诸如 "mounted" 和 "unmounted" 之类的生命周期钩子。

条件渲染指令

本概述描述了如何一起使用用于条件渲染的不同 Vue 指令。

指令	详细信息
`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 写入"Not in stock"。

<p v-if="typewriterCount>3">
In stock
</p>

<p v-else-if="typewriterCount>0">
Very few left!
</p>

<p v-else>
Not in stock
</p>

亲自试一试 »

示例 2

当句子不包含"pizza"或"burrito"时，使用 v-else 显示特定文本。

<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</div>
<div v-else-if="text.includes('burrito')">
<p>The text includes the word 'burrito', but not 'pizza'</p>
<img src="img_burrito.svg">
</div>
<p v-else>The words 'pizza' or 'burrito' are not found in the text</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>

亲自试一试 »