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:

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

Colleghiamo questo oggetto a un tag:

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

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