Skip to main content

What is the difference between v-if and v-show?

VueJunior~1 min read
Suggest an edit

v-if and v-show are both directives that control the display of an element, but they work in fundamentally different ways. This is one of the most common interview questions.

The main difference

v-if fully removes/creates the element in the DOM.

v-show simply toggles the CSS property display (hides/shows).

Detailed comparison

1. How it works

v-if

  • the element is created when the condition is true
  • the element is removed when the condition is false
  • each toggle → an actual DOM change
html
<div v-if="visible">Hello</div>

v-show

  • the element always exists in the DOM
  • Vue only changes the style:
css
display: none;
html
<div v-show="visible">Hello</div>

2. Performance

v-if is heavier for frequent toggling

Because:

  • a new DOM element is created
  • lifecycle hooks are called (mounted, unmounted)
  • Vue recalculates the virtual DOM

v-show is lighter for frequent show/hide

Only CSS changes.

3. When to use which?

Use v-if if:

  • the element is shown rarely
  • rendering the element is expensive (complex components, large lists)
  • you need to fully remove the element from the DOM (for example, a modal, expensive blocks)

Example: the element is visible only after data has loaded.

Use v-show if:

  • you need to toggle visibility frequently (menus, tabs, accordions)
  • there is no point recreating the element
  • the content is simple and light

4. <template> works only with v-if

html
<template v-if="show"> <h1>Title</h1> <p>Text</p> </template>

For v-show, <template> doesn't make sense, it must be on the element itself.

5. Animations

  • v-if works with enter/leave animations (the element appears/disappears)
  • v-show works only with visibility animations (the element stays in the DOM)

Comparison example

v-if

html
<div v-if="isOpen">Content</div>

Result:

  • isOpen = false → the element is NOT in the DOM
  • isOpen = true → the element is added

v-show

html
<div v-show="isOpen">Content</div>

Result:

  • the element is ALWAYS in the DOM
  • isOpen = false → display: none
  • isOpen = true → display: block

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit