v-if Diretiva de Renderização Condicional
Última atualização: 2026-10-22
v-if Diretiva de Renderização Condicional
O v-if renderiza o bloco apenas quando a expressão é verdadeira: quando falsa, o elemento é de fato destruído e removido do DOM; tornando-se verdadeira de novo, é recriado.
| Grupo | Diretivas |
|---|---|
| Tipo | Diretiva |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<div v-if="condition">...</div>
<div v-else-if="anotherCondition">...</div>
<div v-else>...</div>⚙️ Argumentos
| expression | Qualquer expressão que resulte em verdadeiro/falso (escrita diretamente no template, sem chaves) |
|---|
Retorno：Diretiva, sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The page shows 'Now you see me'. Clicking the button removes the paragraph from the DOM.💡 Pontos-chave
💡 Dica A troca é cara (destrói/recria DOM): para alternar visibilidade com frequência, o v-show compensa mais.
⚠️ Aviso Nunca coloque v-if e v-for no mesmo elemento: o v-if tem prioridade maior e não consegue acessar a variável do loop; use um template aninhado.
ℹ️ Nota v-else / v-else-if devem vir imediatamente após o elemento v-if, sem nada no meio.
🏷️ Diretivas relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Qual a diferença entre v-if e v-show?
R O v-if destrói/recria o elemento de verdade (renderização preguiçosa: com condição inicial falsa, nada é renderizado); o v-show sempre renderiza o elemento e apenas alterna o display CSS.
P Por que o elemento some do DevTools quando a condição é falsa?
R Esse é exatamente o comportamento do v-if: o elemento é removido do DOM e destruído, não escondido.
P O v-if pode ser combinado com o v-for?
R Não no mesmo elemento. Coloque o v-if em um <template v-if> externo envolvendo o elemento do v-for.
