Vue v-else 指令
示例
使用 v-else 指令创建 <div> 元素，当所有上述条件均为“false”时。
<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
使用 v-else 在打字机数量为 0 时写入“无库存”。
<p v-if="typewriterCount>3">
有库存
</p>
<p v-else-if="typewriterCount>0">
剩余很少！
</p>
<p v-else>
无库存
</p>
亲自尝试 »
示例 2
使用 v-else 在句子中不包含“pizza”或“burrito”时显示特定文本。
<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: '我喜欢泰国牛肉沙拉、河粉汤和塔吉锅。'
}
}
})
app.mount('#app')
</script>
亲自尝试 »
相关页面
Vue 教程：Vue v-if 指令
Vue 参考：Vue v-if 指令
Vue 参考：Vue v-else-if 指令
Vue 教程：Vue 动画
Vue 教程：Vue 生命周期钩子
