Vue.js: Bind de Class & Style

Última atualização: 2026-10-20

:class e :style são os dois bindings mais comumente usados no Vue — eles permitem alternar dinamicamente nomes de classes CSS e estilos inline com base nos dados. Essencialmente, são duas formas sintáticas especiais de v-bind; por serem usados com tanta frequência, foram implementados como “açúcar sintático”.

Dominar esses 5 estilos de escrita é suficiente para cobrir 95% dos cenários: sintaxe de objetos, sintaxe de matrizes, operadores ternários, propriedades calculadas e concatenação de strings.

1. O que você vai aprender

• :class Sintaxe de objetos: alternar entre uma única classe e várias classes com base em condições
• :class Sintaxe de matrizes: como aplicar várias classes simultaneamente
• Misturando matrizes e objetos: combinações complexas de nomes de classes
• :style Sintaxe de objetos: estilos dinâmicos embutidos
• :style Sintaxe de matriz: mesclagem de vários objetos de estilo
• Vinculação de variáveis CSS (recomendado para o Vue 3)

2. Um desafio de estilo com uma etiqueta de status do pedido

(1) Problema: 5 estados, 5 instruções “if”

Alice precisava exibir 5 status de ordem no painel de administração com cores diferentes:

<!-- ❌ The "Broken" Version: 5 v-if with class -->
<span v-if="status === 'pending'" class="badge yellow">Pending</span>
<span v-else-if="status === 'paid'" class="badge green">Paid</span>
<span v-else-if="status === 'shipped'" class="badge blue">Shipped</span>
<span v-else-if="status === 'delivered'" class="badge gray">Delivered</span>
<span v-else class="badge red">Cancelled</span>

O gerente de produto Charlie:

“Alice, isso ficou feio. E se a gente adicionar mais três status no mês que vem? Não dá pra simplesmente copiar e colar. Precisamos de uma abordagem dinâmica e organizada.”

(2) Vue :class Solução: Lidar com 5 estados em apenas 1 linha

(3) Receita

• Redução de HTML: 5 linhas de if-else → 1 linha de :class
• Fácil de manter: Para adicionar um novo estado, basta modificar a propriedade computed; o modelo permanece inalterado.
• Legibilidade: os mapeamentos entre classes e estados estão centralizados em um único local, com uma lógica clara

3. 5 maneiras de escrever :class

(1) Sintaxe de strings

(2) Sintaxe de objetos (a mais comum)

(3) Sintaxe de matrizes

(4) Coexistência com classes estáticas

(5) Aulas sobre componentes

▶ Exemplo: 5 maneiras de escrever :class

Saída:

String → class="badge"
Object → class="active" (isActive = true, hasError = false)
Array → class="active error"
Computed → class="active" (canEdit = true, sem cursor-not-allowed)

4. 5 maneiras de escrever :style

(1) Sintaxe de objetos

(2) Conversão de nomes de propriedades CSS

O Vue converte automaticamente as convenções de nomenclatura do JavaScript para as convenções de nomenclatura do CSS:

(3) Sintaxe de matrizes (combinação de vários objetos)

(4) Aplicação automática de prefixos

O Vue 3 adiciona automaticamente prefixos de navegador às propriedades CSS (com base no mecanismo do navegador):

// Write:
{ transform: 'rotate(45deg)' }

// Vue Auto-add:
{
  -webkit-transform: 'rotate(45deg)',
  transform: 'rotate(45deg)'
}

(5) Variáveis CSS (recomendado para o Vue 3)

▶ Exemplo: 5 maneiras de escrever :style

Saída:

Object → style="color: red; font-size: 16px"
Multi → background-color #42b883, padding 20px
CSS Var → --theme-color: #35495e no elemento
Computed → cor branca, fundo #35495e, padding 20px

5. Exercício abrangente: emblema de status do pedido

▶ Exemplo: Emblema de status do pedido

Saída:

status="paid" → <span class="order-badge bg-green">Paid</span>
status="pending" → bg-yellow / "Pending"
status desconhecido → bg-default / "Unknown"

(1) 📊 4. 5 erros comuns

(2) 📊 5. 5 Comparações de desempenho

(3) 📊 6. As 5 principais diferenças entre classe e estilo

❓ Perguntas Frequentes

📖 Resumo

• :class e :style são sinônimos sintáticos de v-bind; como são os mais utilizados, foram simplificados.
• :class — 5 maneiras de defini-la: string, objeto, array, array + objeto, propriedade calculada
• :style — 5 maneiras de escrevê-lo: objeto, array, array + objeto, variáveis CSS, propriedades calculadas
• Fusão automática de classes estáticas e dinâmicas :class
• O Vue 3 adiciona automaticamente prefixos de CSS para navegadores
• As variáveis CSS são a solução recomendada para a troca de temas no Vue 3 (mais eficiente do que trocar estilos)
• Desempenho: Propriedades de objeto/computadas > Matrizes > Strings

📝 Exercícios

1. Questões básicas (Dificuldade: ⭐)

   Use o seletor :class para implementar três estados do botão:

   • principal: texto branco sobre fundo azul
   • sucesso: texto branco sobre fundo verde
   • perigo: texto branco sobre fundo vermelho

   Dados: const variant = ref('primary')

2. Problemas avançados (Dificuldade: ⭐⭐)

   Implemente uma lista de pedidos em que cada linha exiba um ícone em uma cor diferente, de acordo com o status do pedido:

   • 5 status (em espera/pago/enviado/entregue/cancelado)
   • Retornar um objeto class usando uma propriedade calculada
   • :style Adicione a cor do ícone correspondente ao status

3. Problema desafiador (Dificuldade: ⭐⭐⭐)

   Implementar um sistema completo de troca de temas:

   1. 3 temas (claro/escuro/alto contraste)
   2. Use variáveis CSS para definir as cores do tema (primária/secundária/fundo/texto)
   3. :class — Alterar o nome da classe do tema
   4. Use o localStorage para lembrar a seleção do usuário
   5. A troca de temas não atualiza a página (o design responsivo é atualizado automaticamente)

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós