Реактивност на обект с CSS класове във Vue

Обектът с CSS класове е предназначен за това, за да бъде удобно реактивно да се задават класове на елементи. Нека да видим как се прави това. Да предположим, че имаме следния обект с класове:

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

Нека свържем този обект към таг:

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

Да предположим, че наличието на класа done зачертава текста на тага:

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

Нека направим бутон, натискането на който ще променя обекта със стилове, включвайки класа done:

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

Нека напишем съответния метод:

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

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

cssp.hidden {
  display: none;
}