Réactivité d'un objet avec des classes CSS dans Vue

Un objet avec des classes CSS est destiné à faciliter l'attribution réactive de classes aux éléments. Voyons comment cela se fait. Supposons que nous ayons l'objet suivant avec des classes :

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

Lions cet objet à une balise :

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

Supposons que la présence de la classe done barré le texte de la balise :

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

Créons un bouton sur lequel un clic modifiera l'objet avec les styles, en activant la classe done :

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

Écrivons la méthode correspondante :

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

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

cssp.hidden {
  display: none;
}