Vinculações dinâmicas e múltiplas com v-bind
Nomes dinâmicos de atributos :[dynamicAttr], sintaxe de objeto do v-bind e vinculação de vários atributos de uma vez.
Vinculações dinâmicas e múltiplas com v-bind é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Associando atributos dinamicamente
A diretiva v-bind (forma abreviada :) conecta um atributo HTML a um valor reativo. Ela permite usar classes e estilos dinâmicos e até atributos com nomes definidos dinamicamente.
v-bind básico
Associe qualquer atributo a uma expressão. Quando o valor muda, Vue atualiza o atributo.
<img :src="imageUrl" :alt="description" />Associação de classe: sintaxe de objeto
Para classes, a sintaxe de objeto alterna uma classe com base em um valor verdadeiro. A chave é o nome da classe; o valor decide se ela será aplicada.
<div :class="{ active: isActive, disabled: isDisabled }"></div>Associação de classe: sintaxe de matriz
A sintaxe de matriz aplica uma lista de classes. Combine textos estáticos e variáveis reativas ou aninhe um objeto para entradas condicionais.
<div :class="[baseClass, isActive ? activeClass : '']"></div>Combinando matriz e objeto
Você pode aninhar a forma de objeto dentro da matriz para obter o melhor dos dois: classes sempre ativas e classes condicionais.
<div :class="[baseClass, { active: isActive }]"></div>Associação de estilo: sintaxe de objeto
Associe estilos em linha usando um objeto. Use nomes de propriedades em camelCase (ou kebab-case entre aspas). Os valores podem ser reativos.
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>Associação de estilo: matriz de objetos
Passe uma matriz de objetos de estilo para combinar várias fontes de estilo, como um estilo base e uma substituição de tema.
<div :style="[baseStyles, overrideStyles]"></div>Associando vários atributos de uma só vez
v-bind sem um argumento distribui um objeto inteiro de atributos pelo elemento. Cada chave se torna um atributo.
<script setup>
const attrs = { id: 'main', class: 'box', 'data-role': 'panel' }
</script>
<template>
<div v-bind="attrs"></div>
</template>Nomes de atributos dinâmicos
Use colchetes para calcular o próprio nome do atributo durante a execução. A expressão entre colchetes é avaliada e usada como chave do atributo.
<script setup>
const attrName = 'title'
const attrValue = 'Hello'
</script>
<template>
<div :[attrName]="attrValue"></div>
</template>Quando usar cada opção
- Sintaxe de objeto para classes — alternar várias classes por condição.
- Sintaxe de matriz para classes — combinar uma classe base com condicionais.
v-bind="obj"— encaminhar um conjunto inteiro de atributos.- Nome dinâmico
:[name]— quando a chave do atributo é decidida durante a execução.
Um exemplo combinado
Este elemento usa classe dinâmica, estilo dinâmico e atributos distribuídos em conjunto — tudo reativo.
<div
:class="[base, { active: isActive }]"
:style="{ color: textColor }"
v-bind="extraAttrs"
></div>Verificação rápida
Teste seus conhecimentos sobre v-bind.
Recapitulação
Você aprendeu a amplitude de recursos de v-bind:
- A sintaxe de objeto para classes alterna classes por condição; a sintaxe de matriz as combina.
- A associação de estilos usa objetos (camelCase) ou matrizes de objetos.
v-bind="obj"distribui todos os atributos de um objeto.:[name]="val"associa um atributo cujo nome é definido dinamicamente.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Vinculações dinâmicas e múltiplas com v-bind” é grátis?
Sim — o texto completo de “Vinculações dinâmicas e múltiplas com v-bind” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Vinculações dinâmicas e múltiplas com v-bind”?
Nomes dinâmicos de atributos :[dynamicAttr], sintaxe de objeto do v-bind e vinculação de vários atributos de uma vez. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Vinculações dinâmicas e múltiplas com v-bind”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- v-model: elementos internos da vinculação bidirecional
- Modificadores de eventos v-on
- Vinculações dinâmicas e múltiplas com v-bind
- Como escrever diretivas personalizadas