Oggetto con classi CSS in Vue
Le classi CSS possono anche essere memorizzate in
oggetti. In questo caso, i nomi delle classi
saranno le chiavi dell'oggetto, e gli elementi
dell'oggetto saranno valori booleani.
Se il valore è true,
allora la classe verrà aggiunta all'elemento,
mentre se è false, non lo sarà.
Proviamo nella pratica. Supponiamo di avere il seguente oggetto con le classi:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Colleghiamo questo oggetto a un tag:
<template>
<p :class="obj">testo</p>
</template>
Dato il seguente oggetto con le classi CSS:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Applica queste classi a un tag qualsiasi. Verifica quali classi sono state applicate, e quali no.
