CSS osztály objektum Vue-ban
A CSS osztályok objektumokban is tárolhatók.
Ebben az esetben az osztálynevek lesznek
az objektum kulcsai, az objektum elemei
pedig logikai értékek lesznek.
Ha az érték true,
akkor az osztály hozzáadásra kerül az elemhez,
ha pedig false, akkor nem.
Próbáljuk ki gyakorlatban. Tegyük fel, hogy a következő objektumunk van osztályokkal:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Kötssük ezt az objektumot egy elemhez:
<template>
<p :class="obj">szöveg</p>
</template>
Adott a következő objektum CSS osztályokkal:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Alkalmazza ezeket az osztályokat valamilyen elemre. Ellenőrizze, hogy mely osztályok kerültek alkalmazásra, és melyek nem.
