v-if directive behavior in Vue - Step-by-Step Execution

Concept Flow - v-if directive behavior

Start Component Render

↓

Evaluate v-if Condition

↓

Render Element

↓

Element in DOM

↓

Component Render Complete

The v-if directive checks a condition during rendering. If true, it adds the element to the DOM; if false, it skips rendering it.

Execution Sample

Vue

<template>
  <p v-if="show">Hello Vue!</p>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

This code shows a paragraph only if the 'show' variable is true.

Execution Table

Step	v-if Condition (show)	Action	DOM Result
1	true	Render <p> element	<p>Hello Vue!</p> added to DOM
2	false	Skip <p> element	<p> element NOT in DOM

💡 Rendering ends after condition evaluation and DOM update

Variable Tracker

Variable	Start	After Step 1	After Step 2
show	true	true	false

Key Moments - 2 Insights

Why does the element disappear when 'show' changes to false?

Because v-if removes the element from the DOM when the condition is false, as shown in execution_table step 2.

Is the element hidden or removed when v-if is false?

The element is completely removed from the DOM, not just hidden, which is why it doesn't appear in the DOM result at step 2.

Visual Quiz - 3 Questions

Look at the execution table, what is the DOM result when 'show' is true?

A <p>Hello Vue!</p> added to DOM

B <p> element NOT in DOM

C Empty DOM

D Error in rendering

💡 Hint

Check execution_table row 1 under 'DOM Result'

At which step does the <p> element get removed from the DOM?

A Step 1

B Before Step 1

C Step 2

D Never removed

💡 Hint

Look at execution_table row 2 where action is 'Skip

element'

If 'show' starts as false, what will the DOM contain after rendering?

A <p>Hello Vue!</p> element

B No <p> element

C Error message

D Empty <p> element

💡 Hint

Refer to variable_tracker 'show' value and execution_table step 2

Concept Snapshot

v-if directive conditionally renders elements.
If condition is true, element is added to DOM.
If false, element is removed from DOM.
Use reactive variables to control visibility.
v-if completely removes element, unlike v-show which hides it.

Full Transcript

The v-if directive in Vue controls whether an element is rendered in the DOM based on a condition. When the component renders, Vue evaluates the v-if condition. If the condition is true, Vue adds the element to the DOM. If false, Vue skips rendering the element, so it does not exist in the DOM at all. This means the element is removed completely, not just hidden. For example, if a reactive variable 'show' is true, the paragraph with v-if='show' appears. If 'show' changes to false, Vue removes the paragraph from the DOM. This behavior helps control what the user sees dynamically and efficiently.