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:

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

Vinculamos este objeto a la etiqueta:

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

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