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:

javascriptdata() {
  return {
    obj: {
      active: true,
      valid:  false,
    },
  }
}

Vamos vincular este objeto a uma tag:

App.vue<template>
  <p :class="obj">texto</p>
</template>

javascriptdata() {
  return {
    obj: {
      done: true,
      selected:  false,
    },
  }
}