v-if Conditional Rendering Directive
Last updated: 2026-10-22
v-if Conditional Rendering Directive
v-if renders a block only when the expression is truthy. When falsy the element is destroyed and removed from the DOM; when truthy again it is re-created.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<div v-if="condition">...</div>
<div v-else-if="anotherCondition">...</div>
<div v-else>...</div>⚙️ Arguments
| expression | Any expression evaluating to truthy/falsy (written directly, without braces) |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
The page shows 'Now you see me'. Clicking the button removes the paragraph from the DOM.💡 Key Points
💡 Tip Toggling is expensive (destroy/re-create DOM). For frequent toggling prefer v-show.
⚠️ Warning Never use v-if and v-for on the same element: v-if has higher priority and cannot access the loop variable. Nest a template instead.
ℹ️ Note v-else / v-else-if must directly follow the v-if element — nothing in between.
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q What is the difference between v-if and v-show?
A v-if truly destroys/re-creates the element (lazy); v-show always renders it and only toggles CSS display.
Q Why is the element gone from DevTools when the condition is falsy?
A That is exactly v-if: the element is removed from the DOM and destroyed, not hidden.
Q Can v-if be combined with v-for?
A Not on the same element. Wrap the v-for element in an outer <template v-if> instead.
