v-else Conditional Branch (Else)
Last updated: 2026-10-22
v-else Conditional Branch (Else)
v-else provides the 'otherwise' branch for v-if: it renders when v-if is falsy and takes no expression.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<p v-if="loggedIn">Welcome back</p>
<p v-else>Please log in</p>⚙️ Arguments
| expression | No expression |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
The page shows 'Pass'; change score to 50 to see 'Fail'.💡 Key Points
⚠️ Warning v-else must directly follow the v-if / v-else-if element — no elements or comments in between.
💡 Tip Chain multiple branches with v-else-if and close with a single v-else.
ℹ️ Note The v-else element must be the immediate sibling of the v-if element.
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Must v-else directly follow v-if?
A Yes — any element or comment in between breaks the pairing.
Q Can there be more than one v-else?
A No — one chain has a single trailing v-else; use v-else-if for middle conditions.
Q Does v-else take an expression?
A No — it renders whenever the preceding branch is falsy.
