Objeto con clases CSS en Vue
Las clases CSS también pueden almacenarse en
objetos. En este caso, los nombres de las clases
serán las claves del objeto, y los elementos
del objeto serán valores booleanos.
Si el valor es true,
la clase se agregará al elemento,
y si es false, no se agregará.
Probemos en la práctica. Supongamos que tenemos el siguiente objeto con clases:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Vinculamos este objeto a la etiqueta:
<template>
<p :class="obj">texto</p>
</template>
Se da el siguiente objeto con clases CSS:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Aplique estas clases a alguna etiqueta. Compruebe qué clases se aplicaron, y cuáles no.
