Kurs Vue 3: wiązanie klas i stylów przez :class i :style

class i style to dwa szczególne atrybuty: poza ciągami znaków v-bind przyjmuje w nich także obiekty i tablice. To dzięki temu stan aplikacji widać w jej wyglądzie, bez ręcznego grzebania w DOM-ie.

Kolorowe kropki

Zamieńmy słowa „Niebieski” i „Czerwony” na kropki w prawdziwym kolorze. Najpierw zapisz kod szesnastkowy zamiast nazwy:

<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>

Potem zwiąż kolor tła:

<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>

Pojawiają się dwie okrągłe kropki, niebieska i czerwona, a najechanie kursorem nadal zmienia obrazek.

Camel case czy kebab case

Obiekt przekazany do :style to zwykły obiekt JavaScriptu. Nazwy właściwości CSS zapisuje się w nim więc w camel case:

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

Zapis background-color bez cudzysłowów zostałby odczytany jako odejmowanie. Kebab case pozostaje możliwy w cudzysłowach:

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

Obie formy dają ten sam wynik. Wybierz jedną i się jej trzymaj.

Wyprowadzenie stylu z szablonu

Gdy właściwości się mnożą, szablon staje się nieczytelny. Zadeklaruj obiekt w skrypcie:

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

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

Tablica pozwala złożyć kilka obiektów, przy czym późniejsze wygrywają z wcześniejszymi:

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

Wiązanie klasy

Przejdźmy do przycisku. Gdy produktu nie ma na stanie, przycisk musi być jednocześnie nieaktywny i widocznie nieaktywny.

Zacznij od atrybutu disabled, wiązanego tak jak w rozdziale 2:

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

Przycisk nie reaguje już na kliknięcie, ale nic tego nie pokazuje. Dodaj szarą klasę, uzależnioną od tego samego warunku:

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

W obiekcie przekazanym do :class kluczem jest nazwa klasy, a wartością warunek. Gdy !inStock jest prawdziwe, klasa disabledButton zostaje dodana, w przeciwnym razie znika.

class i :class żyją obok siebie

Przycisk nosi jednocześnie class="button" i :class="{ … }". Vue nie stawia ich przeciwko sobie: scala je.

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

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

Klasy stałe trzymaj w class, a klasy warunkowe w :class.

Kilka klas warunkowych

Obiekt przyjmuje tyle wpisów, ile trzeba:

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

Nazwa klasy z myślnikiem musi trafić w cudzysłowy, z tego samego powodu co kebab case w stylach.

Wybór między dwiema klasami

Obiekt dodaje klasę albo ją usuwa. Żeby przełączać się między dwiema klasami, użyj operatora warunkowego w tablicy:

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

Tablica przyjmuje też mieszankę ciągów znaków i obiektów:

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

Gdzie umieścić CSS

Komponent jednoplikowy może nieść własny styl, izolowany atrybutem scoped:

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

Te klasy da się też animować: o tym mówi rozdział o przejściach.

Ze scoped reguły obejmują wyłącznie elementy tego komponentu: Vue dokłada znacznikom unikalny atrybut i powtarza go w selektorze. To właśnie dlatego klasa .button zdefiniowana w jednym komponencie nie przemaluje innego.