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

Practice - 5 Tasks

1fill in blank

easy

Complete the code to use v-if to conditionally render the paragraph.

Vue

<template>
  <p [1]="isVisible">Hello Vue!</p>
</template>

Drag options to blanks, or click blank then click option'

Av-if

Bv-show

Cv-bind

Dv-for

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-show when you want to remove the element from the DOM.

Confusing v-bind with conditional rendering.

The v-if directive conditionally renders the element in the DOM only if the condition is true.

2fill in blank

medium

Complete the code to use v-show to toggle visibility without removing the element from the DOM.

Vue

<template>
  <p [1]="isVisible">Hello Vue!</p>
</template>

Drag options to blanks, or click blank then click option'

Av-show

Bv-on

Cv-bind

Dv-if

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-if when you want to keep the element in the DOM.

Confusing event directives like v-on with visibility control.

The v-show directive toggles the CSS display property to show or hide the element without removing it from the DOM.

3fill in blank

hard

Fix the error in the code to correctly toggle the element visibility using v-show.

Vue

<template>
  <div>
    <p v-show="[1]">Visible Text</p>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
function toggle() {
  isVisible.value = !isVisible.value
}
</script>

Drag options to blanks, or click blank then click option'

AisVisible.value

BisVisible

Cvisible

Dshow

Attempts:

3 left

💡 Hint

Common Mistakes

Using isVisible.value inside the template, which causes errors.

Using a wrong variable name that is not defined.

In the template, you use the variable name directly without .value. The ref unwraps automatically in templates.

4fill in blank

hard

Fill both blanks to create a Vue component that toggles visibility using v-if and a button click.

Vue

<template>
  <div>
    <p [1]="isVisible">Toggle me!</p>
    <button @click="[2]">Toggle</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
function toggle() {
  isVisible.value = !isVisible.value
}
</script>

Drag options to blanks, or click blank then click option'

Av-if

Btoggle

Cshow

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-show instead of v-if when the question asks for v-if.

Using a wrong function name in the button click handler.

The v-if directive conditionally renders the paragraph, and the button calls the toggle function to change visibility.

5fill in blank

hard

Fill all three blanks to create a Vue component that toggles visibility using v-show, a button click, and a reactive variable.

Vue

<template>
  <div>
    <p [1]="[2]">Show or hide me!</p>
    <button @click="[3]">Toggle</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
function toggle() {
  isVisible.value = !isVisible.value
}
</script>

Drag options to blanks, or click blank then click option'

Av-if

BisVisible

Ctoggle

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-if instead of v-show when asked for v-show.

Using isVisible.value inside the template, which is incorrect.

Using a wrong function name in the button click handler.

The paragraph uses v-show with the reactive variable isVisible. The button calls the toggle function to change visibility.