v-else-if Branch Condicional (Senão Se)
Última atualização: 2026-10-22
v-else-if Branch Condicional (Senão Se)
O v-else-if encadeia múltiplas branches condicionais, avaliando cada uma até encontrar uma que seja verdadeira.
| Grupo | Diretivas |
|---|---|
| Tipo | Diretiva |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<p v-if="t >= 90">Excelente</p>
<p v-else-if="t >= 60">Aprovado</p>
<p v-else>Reprovado</p>⚙️ Argumentos
| expression | Expressão booleana, avaliada na ordem escrita (curto-circuito) |
|---|
Retorno：Diretiva, sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Enter 75 for 'Pass', 95 for 'Excellent', 40 for 'Fail'.💡 Pontos-chave
ℹ️ Nota As condições são avaliadas de cima para baixo e param na primeira correspondência — ordene da mais rigorosa para a mais frouxa.
⚠️ Aviso Cada v-else-if deve vir imediatamente após a branch anterior — a cadeia não pode ser interrompida.
💡 Dica Com mais de três branches, considere retornar o estado de um computed para manter o template limpo.
🏷️ Diretivas relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P A ordem dos v-else-if importa?
R Sim. As condições são avaliadas de cima para baixo em curto-circuito, então ponha a mais rigorosa primeiro.
P Muitas branches deixam o template bagunçado?
R Acima de três, derive um estado via computed e compare apenas esse valor no template.
P O v-else-if pode ser misturado com o v-show?
R Não — a cadeia só pareia entre v-if, v-else-if e v-else.
