Objekt med CSS-klasser i Vue
CSS-klasser kan også lagres i
objekter. I dette tilfælde vil klassernavnene
være nøglerne i objektet, og elementerne
i objektet vil være boolske værdier.
Hvis værdien er true,
vil klassen blive tilføjet til elementet,
og hvis false, så vil den ikke.
Lad os prøve det i praksis. Lad os sige, at vi har følgende objekt med klasser:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Lad os binde dette objekt til tagget:
<template>
<p :class="obj">text</p>
</template>
Følgende objekt med CSS-klasser er givet:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Anvend disse klasser på et eller andet tag. Tjek hvilke klasser der blev anvendt, og hvilke der ikke blev.
