Objekt med CSS-klasser i Vue
CSS-klasser kan också lagras i
objekt. I detta fall kommer klassnamnen
att vara objektets nycklar, och elementen
i objektet kommer att vara booleska värden.
Om värdet är true,
kommer klassen att läggas till elementet,
och om det är false, kommer det inte att göras.
Låt oss prova i praktiken. Antag att vi har följande objekt med klasser:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Låt oss binda detta objekt till en tagg:
<template>
<p :class="obj">text</p>
</template>
Följande objekt med CSS-klasser är givet:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Tillämpa dessa klasser på någon tagg. Kontrollera vilka klasser som applicerades, och vilka som inte gjorde det.
