Reaktivität von Objekten mit CSS-Klassen in Vue

Ein Objekt mit CSS-Klassen ist dazu gedacht, Klassen bequem reaktiv Elementen zuzuweisen. Lassen Sie uns sehen, wie das gemacht wird. Nehmen wir an, wir haben das folgende Objekt mit Klassen:

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

Binden wir dieses Objekt an ein Tag:

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

Nehmen wir an, das Vorhandensein der Klasse done durchstreicht den Text des Tags:

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

Erstellen wir einen Button, dessen Klick das Objekt mit den Stilen ändert, indem es die Klasse done aktiviert:

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

Schreiben wir die entsprechende Methode:

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

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

cssp.hidden {
  display: none;
}