VueJS-3-Tutorial: Klassen und Styles dynamisch binden

class und style sind zwei besondere Attribute: v-bind nimmt hier neben Strings auch Objekte und Arrays entgegen. Genau damit lässt sich der Zustand der Anwendung im Aussehen abbilden, ohne das DOM von Hand anzufassen.

Farbpunkte

Ersetzen wir die Wörter „Bleu“ und „Rouge“ durch Punkte in der echten Farbe. Speichere dafür zuerst einen Hexadezimalcode statt eines Namens:

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

Dann bindest du die Hintergrundfarbe:

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

Es erscheinen zwei runde Punkte, einer blau, einer rot, und beim Hovern wechselt weiterhin das Bild.

Camel Case oder Kebab Case

Das an :style übergebene Objekt ist ein JavaScript-Objekt. Die Namen der CSS-Eigenschaften stehen darin also in Camel Case:

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

background-color ohne Anführungszeichen zu schreiben, würde als Subtraktion gelesen. In Anführungszeichen bleibt Kebab Case möglich:

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

Beide Formen liefern dasselbe Ergebnis. Entscheide dich für eine und bleib dabei.

Die Styles aus dem Template holen

Sobald sich die Eigenschaften häufen, wird das Template unleserlich. Deklariere das Objekt im Skript:

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

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

Ein Array kombiniert mehrere Objekte, wobei die späteren die früheren überschreiben:

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

Eine Klasse binden

Weiter zum Button. Ist das Produkt ausverkauft, muss er deaktiviert sein – und sichtbar deaktiviert.

Fang mit dem Attribut disabled an, gebunden wie in Kapitel 2:

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

Der Button reagiert nicht mehr auf Klicks, aber man sieht es ihm nicht an. Ergänze die graue Klasse, an dieselbe Bedingung geknüpft:

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

Im Objekt, das an :class geht, ist der Schlüssel der Klassenname und der Wert die Bedingung. Ist !inStock wahr, wird die Klasse disabledButton hinzugefügt, sonst wird sie entfernt.

class und :class nebeneinander

Der Button trägt sowohl class="button" als auch :class="{ … }". Vue stellt beide nicht gegeneinander, sondern führt sie zusammen.

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

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

Lass die festen Klassen in class und die bedingten in :class.

Mehrere bedingte Klassen

Das Objekt nimmt so viele Einträge auf, wie du brauchst:

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

Ein Klassenname mit Bindestrich gehört in Anführungszeichen, aus demselben Grund wie Kebab Case bei den Styles.

Zwischen zwei Klassen wählen

Das Objekt fügt eine Klasse hinzu oder entfernt sie. Um zwischen zwei Klassen umzuschalten, nimmst du einen ternären Ausdruck in einem Array:

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

Das Array verträgt auch eine Mischung aus Strings und Objekten:

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

Wohin mit dem CSS

Eine Single-File-Komponente kann ihre eigenen Styles mitbringen, abgeschottet durch das Attribut scoped:

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

Diese Klassen lassen sich auch animieren: darum geht es im Kapitel über Transitions.

Mit scoped gelten diese Regeln nur für die Elemente dieser Komponente: Vue hängt den Tags ein eindeutiges Attribut an und übernimmt es in den Selektor. Genau das verhindert, dass eine Klasse .button aus einer Komponente eine andere umfärbt.