Reactividad de objetos con clases CSS en Vue

Un objeto con clases CSS está destinado a asignar convenientemente clases a los elementos de forma reactiva. Veamos cómo se hace esto. Supongamos que tenemos el siguiente objeto con clases:

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

Vinculemos este objeto a una etiqueta:

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

Supongamos que la presencia de la clase done tacha el texto de la etiqueta:

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

Hagamos un botón, cuyo clic cambiará el objeto con estilos, activando la clase done:

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

Escribamos el método correspondiente:

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

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

cssp.hidden {
  display: none;
}