Vinculação de atributos e classes
Vincule atributos, classes e estilos dinamicamente.
Vinculação de atributos e classes é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 3. 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 3 aulas no total.
Vinculando classes e estilos
É comum precisar alterar a classe ou o estilo de um elemento com base no estado.
O Vue trata :class e :style de maneira especial para que você possa fornecer objetos e vetores, não apenas strings.
Sintaxe de objeto de :class
Forneça um objeto a :class. As chaves são nomes de classes; os valores verdadeiros incluem essas classes.
<div :class="{ active: isActive, disabled: isDisabled }">
Status box
</div>
<!-- if isActive is true, the "active"
class is applied -->Combinando classes estáticas e dinâmicas
Um atributo classe estático e um :class dinâmico são combinados.
<div class="card" :class="{ highlighted: isSelected }">
Always has "card";
adds "highlighted" when selected.
</div>Sintaxe de vetor de :class
Forneça um vetor para aplicar uma lista de classes.
<div :class="[baseClass, themeClass]">Box</div>
<!-- data:
baseClass = "panel"
themeClass = "dark" -->Condicionais no vetor
Você pode combinar expressões condicionais dentro do vetor.
<div :class="[isActive ? 'active' : '', errorClass]">
...
</div>
<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
...
</div>Vinculação de estilos embutidos
A diretiva :style vincula estilos embutidos usando um objeto.
Use nomes de propriedades em camelCase, como fontSize.
<p :style="{ color: textColor, fontSize: size + 'px' }">
Styled text
</p>
<!-- data: textColor = "red", size = 18 -->:style com um vetor
Você pode passar um vetor de objetos de estilo, e o Vue os combina.
<div :style="[baseStyles, overrideStyles]">
Merged styles
</div>Adição automática de prefixos
Quando uma propriedade CSS precisa de prefixos de fornecedor, o Vue pode adicioná-los automaticamente quando houver suporte no navegador.
- Você escreve a propriedade padrão
- O Vue aplica o prefixo correto quando necessário
Isso mantém suas vinculações de estilo organizadas.
Vinculação dinâmica de atributos
Qualquer atributo pode ser vinculado dinamicamente com :attr.
<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>Atributos booleanos
Para atributos booleanos, como disabled, o Vue inclui o atributo somente quando o valor é verdadeiro.
<button :disabled="isSubmitting">Submit</button>
<!-- if isSubmitting is false,
the disabled attribute is removed -->Vinculação condicional de várias classes
Um exemplo prático que alterna várias classes de uma só vez.
<li
class="todo"
:class="{
done: task.completed,
overdue: task.isLate,
priority: task.urgent
}"
>
{{ task.title }}
</li>Verificação rápida
Teste sua compreensão sobre vinculações de classe e estilo.
Recapitulação: vinculações de atributos e classes
Você aprendeu sobre vinculações dinâmicas:
- A sintaxe de objeto de :class alterna classes conforme o valor seja verdadeiro
- A sintaxe de vetor de :class aplica uma lista
- :style vincula estilos embutidos com chaves em camelCase
- Qualquer atributo pode ser vinculado com :attr
- Atributos booleanos aparecem somente quando o valor é verdadeiro
Próximo: fundamentos de componentes e comunicação.
Perguntas Frequentes
A aula “Vinculação de atributos e classes” é grátis?
Sim — o texto completo de “Vinculação de atributos e classes” é 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 3 aulas no total.
O que vou aprender em “Vinculação de atributos e classes”?
Vincule atributos, classes e estilos dinamicamente. 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 3.
Quanto tempo leva a aula “Vinculação de atributos e classes”?
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
- Interpolação e diretivas
- Condicionais e loops
- Vinculação de atributos e classes