Objekt mit CSS-Klassen in Vue
CSS-Klassen können auch in
Objekten gespeichert werden.
Dabei sind die Klassennamen
die Schlüssel des Objekts, und die Elemente
des Objekts sind boolesche Werte.
Wenn der Wert true ist,
wird die Klasse dem Element hinzugefügt,
und wenn er false ist, dann nicht.
Lassen Sie uns das praktisch ausprobieren. Nehmen wir an, wir haben das folgende Objekt mit Klassen:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Binden wir dieses Objekt an ein Tag:
<template>
<p :class="obj">text</p>
</template>
Gegeben ist das folgende Objekt mit CSS-Klassen:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Wenden Sie diese Klassen auf ein beliebiges Tag an. Prüfen Sie, welche Klassen angewendet wurden und welche nicht.
