Vue v-else-if Directive
Example
Using the v-else-if directive to create a <div> element if the condition is '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>
See more examples below.
Definition and Usage
The v-else-if directive is used to render an element conditionally.
The v-else-if directive can only be used after an element with v-if, or after another element with v-else-if.
When v-else-if is used on an element, it must be followed by an expression:
- If the expression evaluates to 'true', the element and all its content is created in the DOM.
- If the expression evaluates to 'false' the element is destroyed.
When an element is toggled using v-else-if:
- We can use the built-in
<Transition>component to animate when the element enters and leaves the DOM. - Lifecycle hooks such as 'mounted' and 'unmounted' are triggered.
Directives for Conditional Rendering
This overview describes how the different Vue directives used for conditional rendering are used together.
| Directive | Details |
|---|---|
v-if |
Can be used alone, or with v-else-if and/or v-else. If the condition inside v-if is 'true', v-else-if or v-else are not considered. |
v-else-if |
Must be used after v-if or another v-else-if. If the condition inside v-else-if is 'true', v-else-if or v-else that comes after are not considered. |
v-else |
This part will happen if the first part of the if-statement is false. Must be placed at the very end of the if-statement, after v-if and v-else-if. |
More Examples
Example 1
Using v-else-if to write "Very few left!" in case there are only 1, 2 or 3 typewriters left in storage.
<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>
Try it Yourself »
Example 2
Using v-else-if to show a certain text and image if the sentence contains '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>
Try it Yourself »
Example 3
Using a chain of v-else-if to flip through images, using the <Transition> component to create animations.
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>
Related Pages
Vue Tutorial: Vue v-if Directive
Vue Reference: Vue v-if Directive
Vue Reference: Vue v-else Directive
Vue Tutorial: Vue Animations
Vue Tutorial: Vue Lifecycle Hooks
