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>