Object Reactivity with CSS Classes in Vue

The CSS class object is designed to make it easy to reactively assign classes to elements. Let's see how this is done. Let's say we have the following class object:

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

Let's bind this object to the tag:

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

Let the presence of the class done cross out the text of the tag:

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

Let's make a button that, when clicked, will change the object with styles, including the done class:

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

Let's write the corresponding method:

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

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

cssp.hidden {
  display: none;
}