Updated June 2026. Tested on Vue 3.

Showing and hiding parts of the page based on a condition is one of the first things you do in Vue. It ships with a small set of directives for exactly this: v-if, v-else, v-else-if and v-show. Here is how each one works, with the Composition API and <script setup>.

Take a simple piece of state.

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

const isSignedIn = ref(false)
</script>

v-if

v-if adds the element to the page when the expression is true, and removes it entirely when it is false.

<button v-if="isSignedIn">Log out</button>

Because isSignedIn is false, that button is not in the DOM at all. Set it to true and Vue renders it.

To control several elements with one condition without adding an extra wrapper, put v-if on a <template> tag. The template itself does not render, only its contents do.

<template v-if="isSignedIn">
  <span>Welcome back</span>
  <button>Log out</button>
</template>

v-else

v-else renders when the matching v-if is false. It takes no expression and must sit on the element right after the v-if.

<button v-if="isSignedIn">Log out</button>
<button v-else>Log in</button>

v-else-if

When there are more than two options, chain with v-else-if. Only one branch in the chain ever shows.

<button v-if="isSignedIn">Log out</button>
<span v-else-if="isDisabled">Sign in is disabled</span>
<button v-else>Log in</button>

v-show

v-show also toggles an element, but it works differently. It always renders the element into the DOM and just flips its CSS display property to hide it.

<div v-show="isSignedIn">Dashboard</div>

Note that v-show does not work with v-else, and you cannot put it on a <template>.

v-if or v-show

The two look similar, so here is when to use each.

  • v-if does not render anything until the condition is true, so it is cheaper on first load. Use it when the condition rarely changes, or when the element is expensive and often not needed.
  • v-show renders once and only toggles CSS, so it is cheaper to flip on and off. Use it for something you show and hide a lot, like a dropdown or a tab.

That is conditional rendering in Vue. v-if and friends for adding and removing, v-show for toggling visibility, and the choice between them comes down to how often the thing changes. Questions welcome in the comments.