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.