v-show vs v-if difference in Vue - Hands-On Comparison

Understanding the Difference Between v-show and v-if in Vue

📖 Scenario: You are building a simple Vue app that shows or hides a message based on user interaction. You want to learn how to use v-show and v-if directives to control the visibility of elements.

🎯 Goal: Create a Vue component that toggles a message's visibility using both v-show and v-if so you can see how they behave differently.

📋 What You'll Learn

Create a Vue component with a message string

Add a boolean variable called isVisible to control visibility

Use v-show to toggle the message visibility

Use v-if to toggle the message visibility

💡 Why This Matters

🌍 Real World

In real apps, you often need to show or hide parts of the UI based on user actions or data. Knowing when to use v-show or v-if helps make your app faster and smoother.

💼 Career

Vue developers must understand v-show and v-if to write efficient and maintainable UI code that responds well to user interaction.

1

DATA SETUP: Create the Vue component with a message

Create a Vue component with a message variable set to the string 'Hello Vue!'.

Vue

export default {
  data() {
    return {
      // Your code here
    };
  }
}

Hint

Inside the data() function, return an object with message set to 'Hello Vue!'.

2

CONFIGURATION: Add a boolean isVisible to control visibility

Add a boolean variable called isVisible set to true inside the data() return object.

Vue

export default {
  data() {
    return {
      message: 'Hello Vue!',
      // Your code here
    };
  }
}

Hint

Add isVisible: true alongside message in the returned data object.

3

CORE LOGIC: Use v-show to toggle the message visibility

In the template section, add a <div> that displays message and uses v-show="isVisible" to control its visibility.

Vue

  



export default {
  data() {
    return {
      message: 'Hello Vue!',
      isVisible: true
    };
  }
}

Hint

Use v-show="isVisible" on the <div> that shows the message.

4

COMPLETION: Add another <div> using v-if to toggle the message

Below the v-show <div>, add another <div> that displays message and uses v-if="isVisible" to control its visibility.

Vue

  {{ message }}
  



export default {
  data() {
    return {
      message: 'Hello Vue!',
      isVisible: true
    };
  }
}

Hint

Add a <div> with v-if="isVisible" below the v-show <div>.

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