Vue.js - Iniciante | Styles e Classes

Definição

No Vue, podemos controlar estilos e classes CSS de forma dinâmica, ou seja, com base no estado do nosso componente.
Isso significa que conseguimos mudar cores, tamanhos, esconder ou mostrar elementos — tudo automaticamente, de acordo com as variáveis reativas.

Em um HTML tradicional, precisaríamos usar document.querySelector e alterar o style ou classList na mão.
No Vue, fazemos isso de forma declarativa, usando binding (v-bind) para conectar estilos e classes diretamente ao estado.

---

Estilos Inline

Podemos usar v-bind:style (ou apenas :style) para alterar propriedades CSS diretamente.
O valor pode ser um objeto JavaScript ou uma expressão.

Exemplo:

<template>
  <div :style="{ color: textoColorido ? 'red' : 'black' }">
    Texto colorido dinamicamente!
  </div>

  <button @click="textoColorido = !textoColorido">
    Alternar cor
  </button>
</template>

<script setup lang="ts">
import { ref } from "vue"

const textoColorido = ref(false)
</script>

Aqui, o estilo da cor (color) muda conforme o valor de textoColorido.

• Quando textoColorido é true, o texto fica vermelho.

• Quando é false, volta a ser preto.

O Vue atualiza isso automaticamente graças à reatividade.

---

Classes Dinâmicas

Podemos usar v-bind:class (ou :class) para adicionar ou remover classes dinamicamente.

O valor pode ser:

• Uma string

• Um array

• Ou um objeto com chaves sendo os nomes das classes e valores booleanos.

Exemplo com objeto:

<template>
  <p :class="{ ativo: isAtivo, desativado: !isAtivo }">
    O item está {{ isAtivo ? 'ativo' : 'desativado' }}
  </p>

  <button @click="isAtivo = !isAtivo">Alternar estado</button>
</template>

<script setup lang="ts">
import { ref } from "vue"

const isAtivo = ref(true)
</script>

<style scoped>
.ativo {
  color: green;
  font-weight: bold;
}

.desativado {
  color: gray;
  text-decoration: line-through;
}
</style>

Nesse exemplo, alternamos entre as classes .ativo e .desativado conforme o estado isAtivo.
Tudo acontece de forma automática, sem manipular o DOM diretamente.

---

Usando no HelloWorld.vue

Vamos modificar o HelloWorld.vue para aplicar uma classe condicional no botão, que muda conforme o número do contador:

<script setup lang="ts">
import { ref } from "vue"

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <button 
    @click="count++"
    :class="{ alto: count > 5 }"
  >
    count is {{ count }}
  </button>
</template>

<style scoped>
button {
  background-color: #ffae23;
  color: #161413;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.3s;
}

button.alto {
  background-color: #161413;
  color: #f0f0f0;
}
</style>

Aqui temos:

• Interpolação ({{ count }}) mostrando o valor do contador.

• Binding de classe (:class="{ alto: count > 5 }") aplicando a classe alto quando o contador for maior que 5.

• O estilo muda automaticamente — a cor do botão inverte quando o valor ultrapassa 5.

---

Conclusão

Estilos e classes dinâmicas são parte essencial da reatividade visual no Vue.
Com elas, conseguimos deixar a interface interativa e responsiva ao estado, sem escrever uma linha de manipulação de DOM manual.

Ferramentas principais para estilização dinâmica no Vue:

• :style → altera propriedades CSS diretamente.

• :class → adiciona ou remove classes com base em condições.

• Escopo de estilo (<style scoped>) → garante que o CSS afete apenas o componente atual.

👉 No próximo passo, vamos falar sobre Forms e Inputs, que conecta campos de formulário diretamente com o estado reativo, permitindo uma comunicação entre o usuário e a aplicação.