Tutorial VueJS 3 – Ligar classes e estilos com v-bind

O class e o style são dois atributos especiais: além de strings, o v-bind aceita neles objetos e arrays. É isso que permite refletir o estado da aplicação no aspeto sem mexer no DOM à mão.

Pastilhas de cor

Vamos substituir as palavras «Bleu» e «Rouge» por pastilhas da cor verdadeira. Guarda primeiro um código hexadecimal em vez de um nome:

<script setup>
const variants = ref([
  { id: 2234, color: '#2563eb', image: '/images/t-shirt-bleu.svg' },
  { id: 2235, color: '#dc2626', image: '/images/t-shirt-rouge.svg' }
])
</script>

Liga depois a cor de fundo:

<div class="variants-wrapper">
  <div
    v-for="variant in variants"
    :key="variant.id"
    class="color-circle"
    :style="{ backgroundColor: variant.color }"
    @mouseover="updateImage(variant.image)"
  ></div>
</div>

Aparecem duas pastilhas redondas, uma azul e uma vermelha, e o hover continua a mudar a imagem.

Camel case ou kebab case

O objeto passado a :style é um objeto JavaScript. Os nomes das propriedades CSS escrevem-se, portanto, em camel case:

<div :style="{ backgroundColor: variant.color }"></div>

Escrever background-color sem aspas seria interpretado como uma subtração. O kebab case continua possível entre aspas:

<div :style="{ 'background-color': variant.color }"></div>

As duas formas produzem o mesmo resultado. Escolhe uma e mantém-te fiel a ela.

Tirar o estilo do template

Quando as propriedades se multiplicam, o template torna-se ilegível. Declara o objeto no script:

<script setup>
const styleTitre = ref({
  color: '#111827',
  fontSize: '28px',
  fontWeight: '700'
})
</script>

<template>
  <h1 :style="styleTitre">{{ product }}</h1>
</template>

Um array permite combinar vários objetos, prevalecendo os últimos sobre os primeiros:

<div :style="[styleBase, styleSurcharge]"></div>

Ligar uma classe

Passemos ao botão. Quando o produto está esgotado, tem de estar ao mesmo tempo inativo e visivelmente inativo.

Começa pelo atributo disabled, ligado como no capítulo 2:

<button class="button" :disabled="!inStock" @click="addToCart">
  Ajouter au panier
</button>

O botão deixa de responder ao clique, mas nada o mostra. Acrescenta a classe cinzenta, condicionada da mesma forma:

<button
  class="button"
  :class="{ disabledButton: !inStock }"
  :disabled="!inStock"
  @click="addToCart"
>
  Ajouter au panier
</button>

No objeto passado a :class, a chave é o nome da classe e o valor é a condição. Quando !inStock é verdadeiro, a classe disabledButton é acrescentada, caso contrário, é retirada.

class e :class coexistem

O botão tem ao mesmo tempo class="button" e :class="{ … }". O Vue não os põe em concorrência: funde-os.

<!-- écrit dans le gabarit -->
<button class="button" :class="{ disabledButton: true }">

<!-- rendu dans la page -->
<button class="button disabledButton">

Guarda as classes fixas em class e as classes condicionais em :class.

Várias classes condicionais

O objeto aceita tantas entradas quantas forem precisas:

<div :class="{ actif: estActif, 'en-erreur': aUneErreur, masque: !visible }"></div>

Um nome de classe com um hífen tem de ficar entre aspas, pela mesma razão que o kebab case dos estilos.

Escolher entre duas classes

O objeto acrescenta ou retira uma classe. Para alternar entre duas classes, usa um ternário dentro de um array:

<div :class="[inStock ? 'enStock' : 'enRupture']"></div>

O array aceita também uma mistura de strings e de objetos:

<div :class="['color-circle', { selectionne: index === selectedVariant }]"></div>

Onde pôr o CSS

Um componente de ficheiro único pode levar o seu próprio estilo, isolado pelo atributo scoped:

<style scoped>
.color-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}
</style>

Estas classes também podem ser animadas: é o tema do capítulo sobre as transições.

Com scoped, estas regras só se aplicam aos elementos deste componente: o Vue acrescenta um atributo único às tags e retoma-o no seletor. É isso que evita que uma classe .button definida num componente vá repintar outro.