Objekt med CSS-klasser i Vue
CSS-klasser kan også lagres i
objekter. I dette tilfellet vil klassennavnene
være nøklene til objektet, og elementene
i objektet vil være boolske verdier.
Hvis verdien er true,
vil klassen bli lagt til elementet,
og hvis false, vil den ikke bli det.
La oss prøve i praksis. La oss si at vi har følgende objekt med klasser:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
La oss binde dette objektet til en tagg:
<template>
<p :class="obj">text</p>
</template>
Følgende objekt med CSS-klasser er gitt:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Bruk disse klassene på en tagg. Sjekk hvilke klasser som ble brukt, og hvilke som ikke ble brukt.
