V-if vs V-show in Vue: Key Differences and When to Use Each

v-if conditionally renders elements by adding or removing them from the DOM, while v-show toggles the element's visibility using CSS display. Use v-if for rare toggles and v-show for frequent show/hide actions.

Quick Comparison

Here is a quick side-by-side comparison of v-if and v-show in Vue.

Factor	v-if	v-show
DOM Manipulation	Adds/removes elements from DOM	Always in DOM, toggles CSS display
Initial Render Cost	Higher (renders conditionally)	Lower (renders once)
Toggle Performance	Slower on frequent toggles	Faster on frequent toggles
Use Case	Conditional rendering, rare toggles	Frequent show/hide, simple visibility
Animation Support	Supports enter/leave transitions	Limited to CSS display transitions
State Preservation	Resets component state on toggle	Preserves component state

Key Differences

v-if completely removes or inserts elements in the DOM based on the condition. This means when the condition is false, the element and its children do not exist in the DOM at all. This is useful when you want to avoid rendering unnecessary elements and save resources, especially if the toggle happens rarely.

On the other hand, v-show keeps the element in the DOM at all times but toggles its visibility by changing the CSS display property. This makes toggling very fast because Vue does not need to add or remove elements, just show or hide them.

Because v-if removes elements, any state inside those elements (like input values or component data) resets when toggled off and on again. v-show preserves state since the element stays in the DOM. Also, v-if supports Vue's transition system for smooth enter and leave animations, while v-show animations are limited to CSS display changes.

Code Comparison

vue

<template>
  <button @click="show = !show">Toggle Message</button>
  <p v-if="show">Hello, I appear and disappear!</p>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

Output

A button labeled 'Toggle Message'. Clicking it shows or hides the paragraph 'Hello, I appear and disappear!' by adding/removing it from the page.

V-show Equivalent

vue

<template>
  <button @click="show = !show">Toggle Message</button>
  <p v-show="show">Hello, I appear and disappear!</p>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

Output

A button labeled 'Toggle Message'. Clicking it shows or hides the paragraph 'Hello, I appear and disappear!' by toggling its visibility with CSS, without removing it from the page.

When to Use Which

Choose v-if when the condition rarely changes or when you want to avoid rendering elements unnecessarily to save resources. It is ideal for expensive components or large lists that should not exist unless needed.

Choose v-show when you need to toggle visibility frequently and want fast performance without re-rendering. It is perfect for simple UI elements like dropdowns, tabs, or modals that stay in the DOM but show or hide often.

Key Takeaways

v-if adds or removes elements from the DOM, v-show toggles visibility with CSS.

v-if is better for rare toggles; v-show is better for frequent toggles.

v-if resets component state on toggle; v-show preserves it.

v-if supports Vue transitions; v-show supports only CSS visibility changes.

Pick v-if to save resources, v-show for fast UI visibility toggling.