Vue v-else-if Directive

❮ Previous Vue Directives Reference Next ❯

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>

Run Example »

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>

Run Example »

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