Reaktivitet för objekt med CSS-klasser i Vue

Ett objekt med CSS-klasser är avsett för att på ett bekvämt sätt reaktivt tilldela klasser till element. Låt oss se hur detta görs. Antag att vi har följande objekt med klasser:

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

Låt oss binda detta objekt till en tagg:

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

Låt närvaron av klassen done genomstryka texten i taggen:

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

Låt oss skapa en knapp, klick på vilken kommer att ändra objektet med stilar, och aktivera klassen done:

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

Låt oss skriva motsvarande metod:

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

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

cssp.hidden {
  display: none;
}