Conditional rendering with v-if

Last reviewed Jun 1, 2026 Content v20260601

Track mode

client_vue

Means

In-browser Vue TS

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Conditional rendering with v-if: the concepts, APIs, and habits you need before advancing in Vue.

Without Conditional rendering with v-if, you will struggle to read or extend Vue codebases and playground exercises.

You will apply Conditional rendering with v-if in contexts like: Greenfield SPAs, dashboards, design systems, and full-stack apps that pair Vue with PHP or Node APIs.

Write TypeScript, click Run—Vue 3 loads from CDN with the template compiler, mountApp shows UI in #app, and printOutput feeds the terminal.

When you can explain the previous lesson's ideas without copying starter code.

Vue controls visibility with v-if, v-else-if, and v-else. Unlike CSS display:none, v-if does not render the branch when false—children are destroyed and recreated when toggling.

v-if vs v-show

v-if — true conditional; good for expensive subtrees or rare branches
v-show — toggles CSS display; element stays mounted; better for frequent toggles

Patterns

<p v-if="loading">Loading…</p>
<p v-else-if="error">{{ error }}</p>
<ul v-else>...</ul>

Keep chains readable—extract subcomponents when branches grow, similar to avoiding deeply nested ternaries in React.

Self-check

When is v-show preferable to v-if?
What happens to child component state when v-if becomes false?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

v-if vs v-show?
When keep DOM hidden?

No discussion yet. Be the first to ask a question.