使用v-else-if
指令创建一个<div>
如果条件为“真”,则为元素。
<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
用于元素,它后面必须跟一个表达式:
当使用切换元素时v-else-if
:
<Transition>
当元素进入和离开 DOM 时要动画化的组件。本概述描述了如何一起使用用于条件渲染的不同 Vue 指令。
指令 | 细节 |
---|---|
v-if |
可单独使用,或与v-else-if 和/或v-else 。如果里面的条件v-if 是真的',v-else-if 或者v-else 不予考虑。 |
v-else-if |
必须在之后使用v-if 或其他v-else-if 。如果里面的条件v-else-if 是真的',v-else-if 或者v-else 之后的内容不予考虑。 |
v-else |
如果 if 语句的第一部分为 false,则这部分将会发生。必须放在 if 语句的最末尾,之后v-if 和v-else-if 。 |
使用v-else-if
如果存储中只剩下 1、2 或 3 台打字机,请写入 "Very few left!"。
<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>
亲自试一试 »
使用v-else-if
如果句子包含“burrito”,则显示特定的文本和图片。
<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 taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>
亲自试一试 »
使用一个链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 生命周期挂钩
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!