Objeto com Classes CSS em Vue
As classes CSS também podem ser armazenadas em
objetos. Neste caso, os nomes das classes
serão as chaves do objeto, e os elementos
do objeto serão valores booleanos.
Se o valor for true,
a classe será adicionada ao elemento,
e se for false, não será.
Vamos experimentar na prática. Suponha que temos o seguinte objeto com classes:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Vamos vincular este objeto a uma tag:
<template>
<p :class="obj">texto</p>
</template>
Dado o seguinte objeto com classes CSS:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Aplique estas classes a alguma tag. Verifique quais classes foram aplicadas, e quais não foram.
