How does v-if work?

VueJunior~1 min read

v-if is a Vue directive for conditional rendering that adds or removes an element from the DOM depending on an expression.

In simpler terms:

If the condition is true, the element is created and inserted into the DOM. If it is false, the element is removed completely.

How `v-if` works

Example:

html

<p v-if="isVisible">Hello!</p>

If isVisible = true → Vue creates the element If isVisible = false → the element is removed

html

<div v-if="status === 'success'">Success</div>
<div v-else-if="status === 'error'">Error</div>
<div v-else>Unknown</div>

When the condition changes:

If it switches to true, Vue creates a new DOM element and runs all the hooks (mounted, updated, etc.).
If it switches to false, Vue removes the element from the DOM, calling the unmounted hooks.

This matters at interviews.

For example, modals, heavy lists, complex blocks.

Because every time the element is created and destroyed → this is more costly.

Not allowed:

html

<div v-for="item in items" v-if="item.visible"></div>

But allowed:

html

<template v-for="item in items">
  <div v-if="item.visible">{{ item.name }}</div>
</template>

Or filter the data beforehand.

html

<template v-if="show">
  <h1>Title</h1>
  <p>Text</p>
</template>

<template> is not rendered into the DOM, only its contents are.

`v-if`	`v-show`
completely removes/creates the node	just hides it through `display: none`
more expensive on frequent toggles	more expensive on first render
suited for rarely displayed content	suited for frequent toggling

Vue understands enter/leave transitions:

html

<transition>
  <p v-if="visible">Hello!</p>
</transition>

When visible changes, Vue runs the CSS animation for appearing or disappearing.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.