Klassen aus Daten

Wie ein Element aussieht, hängt oft von einer Klasse ab: Ein ausverkaufter Kuchen ist grau, das gewählte Getränk ist hervorgehoben. Mit :class kommen die Klassen aus Daten. Meistens übergibst du ihm ein Objekt: Jede Eigenschaft ist der Name einer Klasse, und ihr Wert sagt, ob das Element die Klasse hat:

<script setup>
const istAusverkauft = true;
</script>

<template>
    <p class="kuchen" :class="{ ausverkauft: istAusverkauft }">Käsekuchen</p>
</template>

<style scoped>
.ausverkauft {
    color: #999;
    text-decoration: line-through;
}
</style>

Ist istAusverkauft wahr, hat der Absatz die Klasse ausverkauft, ist es falsch, hat er sie nicht. Das gewöhnliche class="kuchen" bleibt in beiden Fällen, und Vue setzt beide zusammen: Die Seite bekommt <p class="kuchen ausverkauft">. Schreibe also die Klassen, die ein Element immer hat, in class, und die, die von Daten abhängen, in :class.

Das Objekt kann mehr Klassen haben, jede mit ihrer eigenen Bedingung, und eine Bedingung kann jeder Ausdruck sein:

<p :class="{ ausverkauft: istAusverkauft, guenstig: preis < 4 }">Käsekuchen</p>

Ein Klassenname mit Bindestrich muss in Anführungszeichen stehen, wie in jedem JavaScript-Objekt: { 'laktose-frei': laktosefrei }. Ohne sie läuft die App nicht.

Wenn sich die Daten ändern, während die App läuft, ändern sich die Klassen mit. Im JavaScript-Kurs hast du das mit classList.add() und remove() gemacht; hier änderst du nur die Daten.