Reattività dell'oggetto con classi CSS in Vue

L'oggetto con classi CSS è progettato per assegnare in modo conveniente e reattivo le classi agli elementi. Diamo un'occhiata a come si fa. Supponiamo di avere il seguente oggetto con classi:

javascriptdata() {
  return {
    styles: {
      done: false,
    },
  }
}

Associamo questo oggetto a un tag:

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

Supponiamo che la presenza della classe done barrì il testo del tag:

cssp.done {
  text-decoration: line-through;
}

Creiamo un pulsante, il cui clic cambierà l'oggetto con gli stili, attivando la classe done:

App.vue<template>
  <button @click="setDone">nascondi</button>
</template>

Scriviamo il metodo corrispondente:

App.vuemethods: {
  setDone: function() {
    this.styles.done = true;
  }
}

javascriptdata() {
  return {
    obj: {
      hidden: true,
    },
  }
}

cssp.hidden {
  display: none;
}