Vue v-else-if

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

<script setup>
import {ref} from 'vue'

  const value = ref(1)
</script>   

  <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>
</template>

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.

<script setup>
  import {ref} from 'vue'

  const value = ref(1)
</script>   

  <template>
  <!-- this template uses v-else-if without an adjacent v-if-->
  <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>
</Template>