v-bind (:) Vincular Atributos Dinamicamente
Última atualização: 2026-10-22
v-bind (:) Vincular Atributos Dinamicamente
O v-bind vincula o resultado de uma expressão a um atributo HTML, abreviado como dois-pontos: :href="url"; class/style ainda aceitam sintaxe de objeto e array.
| Grupo | Diretivas |
|---|---|
| Tipo | Diretiva |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<a v-bind:href="url">Link</a>
<img :src="imgSrc" :alt="altText">
<div :class="{ active: isActive }"></div>
<div :style="{ color: textColor }"></div>⚙️ Argumentos
| expression | Nome do atributo + expressão; class/style aceitam objetos e arrays; nomes dinâmicos via :[key] |
|---|
Retorno：Diretiva, sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The anchor points to the tutorial site; 'Status text' carries the hot class.💡 Pontos-chave
💡 Dica : é o atalho de v-bind:. Atributos booleanos vinculados a false são removidos automaticamente.
ℹ️ Nota class/style são aprimorados: a forma de objeto alterna por booleano, a forma de array mescla várias fontes.
💡 Dica v-bind="obj" expande de uma vez todas as chaves de um objeto (útil com $attrs).
🏷️ Diretivas relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Como vincular muitos atributos de uma vez?
R v-bind="obj" expande todas as chaves; em componentes, o comum é v-bind="$attrs".
P Por que a vinculação de class aceita objeto?
R class/style são aprimorados: a forma de objeto { classe: booleano } alterna por condição, a forma de array mescla várias fontes.
P Como controlar atributos booleanos?
R Vinculado a false/null o atributo é removido, a true é adicionado — sem precisar de string vazia manual.
