v-show vs v-if difference in Vue - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when using v-show on a Vue element?

Consider a Vue component with an element controlled by v-show. What is the visible effect when the condition is false?

Vue

<template>
  <div v-show="isVisible">Hello!</div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(false)
</script>

A The element is replaced with a comment node in the DOM.

B The element remains in the DOM but is hidden with CSS <code>display: none</code>.

C The element is removed from the DOM completely.

D The element is visible but with zero opacity.

💡 Hint

Think about whether the element stays in the DOM or not.

v-show toggles the CSS display property. The element stays in the DOM but is hidden visually using display: none. This means it is still present but not visible.

❓ component_behavior

intermediate

What happens when using v-if on a Vue element?

Consider a Vue component with an element controlled by v-if. What happens to the element when the condition is false?

Vue

<template>
  <div v-if="isVisible">Hello!</div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(false)
</script>

A The element is removed from the DOM completely.

B The element remains in the DOM but is hidden with CSS <code>display: none</code>.

C The element is replaced with a transparent placeholder.

D The element is visible but with zero opacity.

💡 Hint

Think about whether the element exists in the DOM or not.

v-if conditionally renders the element. When the condition is false, the element is completely removed from the DOM. It does not exist until the condition becomes true again.

❓ state_output

advanced

How many times is the mounted lifecycle hook called when toggling v-if?

Given a component with a child element using v-if to toggle visibility, how many times is the child's mounted hook called if the condition toggles from false to true and back to false and then true again?

Vue

<template>
  <ChildComponent v-if="show" />
  <button @click="show = !show">Toggle</button>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const show = ref(false)
</script>

A Multiple times continuously regardless of toggling.

B Once, because the component stays mounted after first render.

C Twice, once each time the component is created when <code>show</code> becomes true.

D Zero times, because <code>v-if</code> does not mount components.

💡 Hint

Remember what happens to components when v-if removes them.

When v-if removes a component, it is destroyed. When the condition becomes true again, the component is created and mounted anew. So toggling twice to true mounts twice.

❓ state_output

advanced

How many times is the mounted lifecycle hook called when toggling v-show?

Given a component with a child element using v-show to toggle visibility, how many times is the child's mounted hook called if the condition toggles from false to true and back to false and then true again?

Vue

<template>
  <ChildComponent v-show="show" />
  <button @click="show = !show">Toggle</button>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const show = ref(false)
</script>

A Multiple times continuously regardless of toggling.

B Twice, once each time the component is shown.

C Zero times, because <code>v-show</code> does not mount components.

D Once, because the component is mounted once and only hidden or shown.

💡 Hint

Think about whether the component is removed from the DOM or just hidden.

v-show keeps the component in the DOM and mounted. It only toggles CSS visibility. So the mounted hook runs once when the component first appears.

📝 Syntax

expert

Which option correctly toggles visibility using v-if and v-show in Vue 3?

You want to toggle an element's visibility with a button. Which code snippet correctly uses v-if and v-show to show the element only when isVisible is true?

A

<template>
  <div v-if="isVisible">Visible with v-if</div>
  <div v-show="isVisible">Visible with v-show</div>
  <button @click="isVisible = !isVisible">Toggle</button>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(false)
</script>

B

<template>
  <div v-if="isVisible">Visible with v-show</div>
  <div v-show="!isVisible">Visible with v-if</div>
  <button @click="isVisible = !isVisible">Toggle</button>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(false)
</script>

C

<template>
  <div v-if="!isVisible">Visible with v-if</div>
  <div v-show="!isVisible">Visible with v-show</div>
  <button @click="isVisible = !isVisible">Toggle</button>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(false)
</script>

D

<template>
  <div v-if="isVisible">Visible with v-show</div>
  <div v-show="isVisible">Visible with v-if</div>
  <button @click="isVisible = !isVisible">Toggle</button>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(false)
</script>

💡 Hint

Check the directives and their conditions carefully.

Option A correctly uses v-if and v-show with the same condition isVisible. The other options mix conditions or swap directives incorrectly.

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