Reatividade de Objeto com Classes CSS em Vue

Um objeto com classes CSS é destinado a facilitar a atribuição reativa de classes aos elementos. Vamos ver como isso é feito. Suponha que temos o seguinte objeto com classes:

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

Vamos vincular este objeto a uma tag:

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

Suponha que a presença da classe done risque o texto da tag:

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

Vamos criar um botão cujo clique alterará o objeto de estilos, ativando a classe done:

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

Vamos escrever o método correspondente:

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

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

cssp.hidden {
  display: none;
}