Vue Conditional Rendering Explained — v-if v-show and v-else

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Vue Conditional Rendering Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue offers two conditional rendering approaches: v-if for conditional creation/destruction of DOM elements and v-show toggles the display CSS property.

What You'll Learn

v-if, v-else-if, v-else chains
v-show for frequent toggles
template for group conditionals
key for element re-use
v-if vs v-show performance

Why It Matters

Choosing between v-if and v-show affects performance. v-if removes elements from the DOM entirely, while v-show keeps them hidden, each suited for different scenarios.

<template>
  <div>
    <button @click="status = nextStatus()">Next Status</button>

    <div v-if="status === 'loading'" class="spinner">
      Loading data...
    </div>
    <div v-else-if="status === 'error'" class="error">
      Something went wrong. Please try again.
    </div>
    <div v-else class="success">
      Data loaded successfully!
    </div>

    <p v-show="debugMode">Debug: Current status is "{{ status }}"</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const statuses = ["loading", "success", "error"];
const statusIndex = ref(0);
const status = ref(statuses[0]);
const debugMode = ref(true);

function nextStatus() {
  statusIndex.value = (statusIndex.value + 1) % statuses.length;
  status.value = statuses[statusIndex.value];
}
</script>

Expected output: Clicking cycles through loading, error, and success states. Debug text shows/hides via display toggle.

← Previous Vue Class and Style Bindings Explained — Dynamic Styling Next → Vue List Rendering Explained — v-for Directives Deep Dive

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Vue