v-show Alternar Visibilidade via CSS
Última atualização: 2026-10-22
v-show Alternar Visibilidade via CSS
O v-show alterna o estilo display do elemento conforme a expressão: o elemento permanece sempre no DOM, apenas escondido ou visível.
| Grupo | Diretivas |
|---|---|
| Tipo | Diretiva |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<p v-show="isVisible">Agora você me vê</p>⚙️ Argumentos
| expression | Qualquer expressão verdadeira/falsa |
|---|
Retorno：Diretiva, sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Toggling hides/shows the text while the element remains in the DOM with display: none.💡 Pontos-chave
💡 Dica Em trocas frequentes, o v-show é mais barato: muda apenas CSS, sem destruir e recriar DOM.
ℹ️ Nota Se a condição inicial é falsa, o elemento ainda é renderizado (fica no lugar); o custo inicial é maior.
⚠️ Aviso O v-show não suporta v-else: é uma troca de estilo, não uma diretiva de fluxo.
🏷️ Diretivas relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P v-show ou v-if, qual escolher?
R Troca frequente → v-show (apenas CSS); condição raramente alterada ou renderização preguiçosa → v-if.
P O DevTools ainda mostra o elemento escondido pelo v-show?
R Sim, o elemento continua no DOM, apenas com display: none.
P O v-show pode ser usado com v-else?
R Não, o v-show não é uma diretiva de branching; para exibição mutuamente exclusiva, use v-if / v-else.
