v-else-if Conditional Branch (Else If)
Last updated: 2026-10-22
v-else-if Conditional Branch (Else If)
v-else-if chains multiple conditional branches, evaluating each until one is truthy.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<p v-if="t >= 90">Excellent</p>
<p v-else-if="t >= 60">Pass</p>
<p v-else>Fail</p>⚙️ Arguments
| expression | A boolean expression, evaluated in order (short-circuit) |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
Enter 75 for 'Pass', 95 for 'Excellent', 40 for 'Fail'.💡 Key Points
ℹ️ Note Conditions evaluate top-down and stop at the first match — order from strictest to loosest.
⚠️ Warning Each v-else-if must directly follow the previous branch — the chain cannot be interrupted.
💡 Tip With more than three branches, return a status from a computed property to keep the template clean.
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Does the order of v-else-if matter?
A Yes. Conditions short-circuit top-down, so put the strictest first.
Q Do many branches make the template messy?
A With more than three, derive a status via computed and compare that single value.
Q Can v-else-if mix with v-show?
A No — the chain only pairs v-if, v-else-if and v-else.
