Vue v-else-if 指令
示例
使用 v-else-if 指令来创建 <div> 元素，如果条件为 'true'。
<div v-if="word === 'apple'">
<img src="/img_apple.svg" alt="apple" />
<p>The value of the 'word' property is 'apple'.</p>
</div>
<div v-else-if="word === 'pizza'">
<img src="/img_pizza.svg" alt="pizza" />
<p>The value of the 'word' property is 'pizza'</p>
</div>
请查看以下更多示例。
定义和用法
v-else-if 指令用于有条件地渲染元素。
v-else-if 指令只能用在带有 v-if 的元素之后，或用在另一个带有 v-else-if 的元素之后。
当 v-else-if 用于某个元素时，它必须后面跟着一个表达式
- 如果表达式计算结果为 'true'，则在 DOM 中创建该元素及其所有内容。
- 如果表达式计算结果为 'false'，则销毁该元素。
当使用 v-else-if 切换元素时
- 我们可以使用内置的
<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 语句的第一部分为假，则执行此部分。 必须放在 if 语句的最后，位于 v-if 和 v-else-if 之后。 |
更多示例
示例 1
使用 v-else-if 在存储中只剩下 1、2 或 3 台打字机的情况下写出 "库存不多！"。
<p v-if="typewriterCount>3">
有货
</p>
<p v-else-if="typewriterCount>0">
库存不多！
</p>
<p v-else>
无货
</p>
亲自试一试 »
示例 2
使用 v-else-if 在句子包含 '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: '我喜欢 taco、pizza、泰式牛肉沙拉、河粉汤和塔吉锅。'
}
}
})
app.mount('#app')
</script>
亲自试一试 »
示例 3
使用 v-else-if 的链式调用来翻阅图像，使用 <Transition> 组件来创建动画。
App.vue:
<template>
<h1>mode="out-in"</h1>
<p>Click the button to get a new image.</p>
<p>With mode="out-in", the next image is not added until the current image is removed. Another difference from the previous example, is that here we use computed prop instead of a method.</p>
<button @click="indexNbr++">Next image</button><br>
<Transition mode="out-in">
<img src="/img_pizza.svg" v-if="imgActive === 'pizza'">
<img src="/img_apple.svg" v-else-if="imgActive === 'apple'">
<img src="/img_cake.svg" v-else-if="imgActive === 'cake'">
<img src="/img_fish.svg" v-else-if="imgActive === 'fish'">
<img src="/img_rice.svg" v-else-if="imgActive === 'rice'">
</Transition>
</template>
<script>
export default {
data() {
return {
imgs: ['pizza', 'apple', 'cake', 'fish', 'rice'],
indexNbr: 0
}
},
computed: {
imgActive() {
if(this.indexNbr >= this.imgs.length) {
this.indexNbr = 0;
}
return this.imgs[this.indexNbr];
}
}
}
</script>
<style scoped>
.v-enter-active {
animation: swirlAdded 0.7s;
}
.v-leave-active {
animation: swirlAdded 0.7s reverse;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 360deg;
scale: 1;
}
}
img {
width: 100px;
margin: 20px;
}
img:hover {
cursor: pointer;
}
</style>
相关页面
Vue 教程: Vue v-if 指令
Vue 参考: Vue v-if 指令
Vue 参考: Vue v-else 指令
Vue 教程: Vue 动画
Vue 教程: Vue 生命周期钩子
