Reactivitatea obiectului cu clase CSS în Vue

Obiectul cu clase CSS este destinat pentru a fi utilizat în mod convenabil pentru atribuirea reactivă a claselor elementelor. Să vedem cum se face acest lucru. Să presupunem că avem următorul obiect cu clase:

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

Să legăm acest obiect de o etichetă:

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

Să presupunem că prezența clasei done tăie textul etichetei:

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

Să creem un buton, a cărui apăsare va modifica obiectul cu stiluri, activând clasa done:

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

Să scriem metoda corespunzătoare:

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

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

cssp.hidden {
  display: none;
}