Reaktivitet af objekt med CSS-klasser i Vue

Et objekt med CSS-klasser er designet til at gøre det bekvemt reaktivt at tildele klasser til elementer. Lad os se, hvordan det gøres. Lad os sige, at vi har følgende objekt med klasser:

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

Lad os binde dette objekt til en tag:

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

Lad tilstedeværelsen af klassen done gennemstrege tag'ens tekst:

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

Lav en knap, hvor et klik på den vil ændre objektet med stilarter, hvilket aktiverer klassen done:

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

Lad os skrive den tilsvarende metode:

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

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

cssp.hidden {
  display: none;
}