Vue v-else-if

Jul 18, 2022

Vue provides a v-else-if directive that you can use with v-if analogous to using else if {} with if {}.

const app = Vue.createApp({
  data: () => ({ value: 1 }),
  template: `
  <div>
    <div>
      <h1 v-if="value > 0">Hello</h1>
      <h1 v-else-if="value > 1">There</h1>
      <h1 v-else-if="value > 2">World</h1>
    </div>
    <button @click="value++">Increment</button>
  </div>
  `
}).mount('#content');

v-else-if must follow a v-if. If you use v-else-if without v-if, Vue will print the following warning to the console.

[Vue warn]: Template compilation error: v-else/v-else-if has no adjacent v-if or v-else-if.

Below is an example of using v-else-if without v-if. If you open the console on this page, you'll see a "Template compilation error" warning from Vue.

const example = Vue.createApp({
  data: () => ({ value: 2 }),
  // BAD: this template uses v-else-if without an adjacent v-if
  template: `
  <div>
    <div>
      <h1 v-else-if="value > 1">There</h1>
      <h1 v-else-if="value > 2">World</h1>
      <h1 v-else-if="value > 3">Hello</h1>
    </div>
    <button @click="value++">Increment</button>
  </div>
  `
}).mount('#example');

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!