Obiect cu clase CSS în Vue
Clasele CSS pot fi de asemenea stocate în
obiecte. În acest caz, numele claselor
vor fi cheile obiectului, iar elementele
obiectului vor fi valori logice.
Dacă valoarea este true,
atunci clasa va fi adăugată elementului,
iar dacă este false, atunci nu va fi.
Să încercăm în practică. Să presupunem că avem următorul obiect cu clase:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Să legăm acest obiect de etichetă:
<template>
<p :class="obj">text</p>
</template>
Este dat următorul obiect cu clase CSS:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Aplicați aceste clase unei etichete. Verificați care clase s-au aplicat, și care nu.
