v-show vs v-if difference in Vue - Visual Side-by-Side Comparison

Concept Flow - v-show vs v-if difference

Component Render Start

↓

Evaluate v-if Condition

|Yes↓

Render Element in DOM

↓

Element Visible

↓

Condition False?

No↓

Remove Element from DOM

↓

Evaluate v-show Condition

|Yes↓

Element in DOM

↓

Set CSS display: block

↓

Element Visible

↓

Condition False?

No↓

Set CSS display: none

↓

Element Hidden but in DOM

v-if adds or removes the element from the DOM based on condition. v-show keeps the element in the DOM but toggles its visibility using CSS.

Execution Sample

Vue

<template>
  <div v-if="showIf">Visible with v-if</div>
  <div v-show="showShow">Visible with v-show</div>
</template>

<script setup>
import { ref } from 'vue'
const showIf = ref(true)
const showShow = ref(true)
</script>

This Vue component shows two divs controlled by v-if and v-show conditions.

Execution Table

Step	Condition	v-if DOM Action	v-show DOM Action	Element Visible?
1	showIf = true, showShow = true	Add element to DOM	Element in DOM, display:block	Both visible
2	showIf = false, showShow = true	Remove element from DOM	Element in DOM, display:block	v-if hidden, v-show visible
3	showIf = false, showShow = false	Remove element from DOM	Element in DOM, display:none	Both hidden (v-show hidden by CSS)
4	showIf = true, showShow = false	Add element to DOM	Element in DOM, display:none	v-if visible, v-show hidden by CSS

💡 Execution stops after all condition combinations are evaluated.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
showIf	true	true	false	false	true
showShow	true	true	true	false	false

Key Moments - 3 Insights

Why does v-if remove the element from the DOM but v-show does not?

v-if conditionally renders the element, so when false it removes it completely (see execution_table step 2). v-show always keeps the element in the DOM but toggles CSS display property (see step 3).

If I want to toggle visibility frequently, which should I use?

Use v-show because it only changes CSS display without removing the element, making toggling faster (see execution_table steps 3 and 4).

Does v-show affect accessibility differently than v-if?

Yes, because v-show keeps the element in the DOM but hidden, screen readers might still detect it unless additional ARIA attributes are used.

Visual Quiz - 3 Questions

Look at the execution table, at step 3 what is the v-show DOM action?

A Remove element from DOM

B Element in DOM, display:none

C Add element to DOM

D Element in DOM, display:block

💡 Hint

Check the 'v-show DOM Action' column at step 3 in the execution_table.

At which step does v-if remove the element from the DOM?

A Step 4

B Step 1

C Step 2

D Step 3

💡 Hint

Look at the 'v-if DOM Action' column in the execution_table.

If showShow changes from true to false, what happens to the element controlled by v-show?

A Element remains in DOM but hidden with CSS

B Element becomes visible

C Element is removed from DOM

D Element is duplicated

💡 Hint

Refer to variable_tracker and execution_table steps where showShow changes to false.

Concept Snapshot

v-if conditionally adds/removes elements from the DOM.
v-show toggles element visibility using CSS display.
v-if is better for rare toggles.
v-show is better for frequent toggles.
v-show keeps element in DOM, affecting accessibility.
Use v-if to save resources when hidden.

Full Transcript

This visual execution compares v-if and v-show in Vue. v-if adds or removes elements from the DOM based on a condition, meaning the element does not exist in the DOM when the condition is false. v-show keeps the element always in the DOM but toggles its visibility by changing the CSS display property between 'block' and 'none'. The execution table shows four steps with different combinations of conditions for showIf and showShow variables. When showIf is false, the element controlled by v-if is removed from the DOM. When showShow is false, the element controlled by v-show remains in the DOM but is hidden by CSS. The variable tracker shows how these variables change over steps. Key moments clarify common confusions about DOM removal, toggling speed, and accessibility. The quiz tests understanding of these behaviors referencing the execution table and variable tracker. The snapshot summarizes the main differences and when to use each directive.

Practice

1. What is the main difference between v-if and v-show in Vue?

easy

A. v-if adds/removes elements from the DOM; v-show toggles visibility with CSS.

B. v-if toggles visibility with CSS; v-show adds/removes elements from the DOM.

C. v-if and v-show both remove elements from the DOM but in different ways.

D. v-if only works on components; v-show only works on HTML elements.

Solution

1. Step 1: Understand v-if behavior

   v-if conditionally adds or removes elements from the DOM based on the condition.

2. Step 2: Understand v-show behavior

   v-show keeps the element in the DOM but toggles its visibility using CSS display property.

3. Final Answer:

   v-if adds/removes elements from the DOM; v-show toggles visibility with CSS. -> Option A

4. Quick Check:

   v-if = DOM add/remove, v-show = CSS toggle [OK]

Hint: Remember: v-if changes DOM, v-show changes CSS [OK]

Common Mistakes:

• Thinking v-show removes elements from DOM
• Confusing which directive controls DOM vs CSS
• Assuming both behave the same way

2. Which of the following is the correct syntax to use v-show in a Vue template?

easy

A. <div v-show='isVisible'>Content</div>

B. <div v-show:isVisible>Content</div>

C. <div v-show:='isVisible'>Content</div>

D. <div v-show(isVisible)>Content</div>

Solution

1. Step 1: Recall Vue directive syntax

   Vue directives use the format v-directive='expression' without colons or parentheses.

2. Step 2: Check each option

   <div v-show='isVisible'>Content</div> uses correct syntax: v-show='isVisible'. Others misuse colons or parentheses.

3. Final Answer:

   <div v-show='isVisible'>Content</div> -> Option A

4. Quick Check:

   Directive syntax = v-show='condition' [OK]

Hint: Vue directives use = with quotes, no colons or parentheses [OK]

Common Mistakes:

• Using colon instead of equal sign
• Adding parentheses around condition
• Omitting quotes around the expression

3. Given the Vue template:

<template>
  <div>
    <p v-if='show'>Hello</p>
    <p v-show='show'>World</p>
  </div>
</template>

and show is initially false, what will be rendered in the DOM?

medium

A. No <p> elements are in the DOM.

B. Only <p>World</p> is in the DOM but hidden.

C. Both <p>Hello</p> and <p>World</p> are visible.

D. Only <p>Hello</p> is in the DOM but hidden.

Solution

1. Step 1: Analyze v-if='show' with show = false

   v-if removes the element from the DOM if the condition is false, so <p>Hello</p> is not in the DOM.

2. Step 2: Analyze v-show='show' with show = false

   v-show keeps the element in the DOM but hides it with CSS, so <p>World</p> is present but not visible.

3. Final Answer:

   Only <p>World</p> is in the DOM but hidden. -> Option B

4. Quick Check:

   v-if=false removes, v-show=false hides [OK]

Hint: v-if=false removes element; v-show=false hides it [OK]

Common Mistakes:

• Thinking v-show removes element
• Assuming both elements are visible
• Confusing which element is hidden or removed

4. Consider this Vue snippet:

<div v-if='isVisible'>Visible</div>
<div v-show='isVisible'>Also Visible</div>

If isVisible is undefined, what is the problem and how to fix it?

medium

A. Both elements will show; fix by initializing isVisible to true.

B. No problem; Vue treats undefined as true.

C. Both elements will not render; fix by initializing isVisible to false.

D. v-if element won't render; v-show element is in the DOM but hidden; fix by defining isVisible as a boolean.

Solution

1. Step 1: Understand how undefined affects v-if and v-show

   v-if treats undefined as false, so the element won't render. v-show treats undefined as false and keeps the element in the DOM but hides it using CSS display: none.

2. Step 2: Fix by defining isVisible properly

   Initialize isVisible in data or state as a boolean (true or false) to avoid unexpected behavior.

3. Final Answer:

   v-if element won't render; v-show element is in the DOM but hidden; fix by defining isVisible as a boolean. -> Option D

4. Quick Check:

   Undefined treated as false; define boolean to fix [OK]

Hint: Always initialize booleans used in v-if and v-show [OK]

Common Mistakes:

• Assuming undefined is true
• Not initializing reactive data
• Expecting same behavior from v-if and v-show

5. You want to toggle a dropdown menu in Vue that is hidden by default and shown only when a button is clicked. The menu content is complex and heavy to render. Which directive should you use and why?

hard

A. Use both v-if and v-show together for best performance.

B. Use v-show because it toggles visibility quickly without removing from DOM.

C. Use v-if because it avoids rendering heavy content until needed.

D. Use neither; control visibility with CSS classes manually.

Solution

1. Step 1: Consider rendering cost of heavy content

   Heavy content should not be rendered until needed to save resources and improve performance.

2. Step 2: Choose directive based on toggle frequency and cost

   v-if adds/removes elements, so it delays rendering until shown, ideal for heavy content toggled infrequently.

3. Final Answer:

   Use v-if because it avoids rendering heavy content until needed. -> Option C

4. Quick Check:

   Heavy content + infrequent toggle = v-if [OK]

Hint: Heavy content? Use v-if to delay rendering [OK]

Common Mistakes:

• Using v-show which renders heavy content always
• Combining both directives unnecessarily
• Ignoring performance impact of rendering