`v-else`

Renders an element when the preceding v-if/v-else-if is falsy.

Since Vue 3.0 Spec ↗

Syntax

v-else

Returns

directive — Renders the fallback branch.

Examples

<script setup lang="ts">
import { ref } from 'vue';
const score = ref(72);
</script>

<template>
  <p v-if="score >= 90">A</p>
  <p v-else-if="score >= 70">B</p>
  <p v-else>Needs work</p>
</template>

Notes

v-else takes no expression and must immediately follow an element with v-if or v-else-if (no other elements in between). v-else-if can be chained multiple times before a final v-else. Use a <template> tag to group several elements per branch.