Object met CSS klassen in Vue
CSS klassen kunnen ook worden opgeslagen in
objecten. Hierbij zijn de klassennamen
de sleutels van het object, en de elementen
van het object zijn boolean waarden.
Als de waarde true is,
dan wordt de klasse aan het element toegevoegd,
en als deze false is, dan niet.
Laten we het in de praktijk proberen. Stel dat we het volgende object met klassen hebben:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Laten we dit object aan een tag binden:
<template>
<p :class="obj">text</p>
</template>
Het volgende object met CSS klassen is gegeven:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Pas deze klassen toe op een willekeurige tag. Controleer welke klassen zijn toegepast, en welke niet.
