Reaktiviteit van objek met CSS-klasse in Vue

'n Objek met CSS-klasse is bedoel om maklik klasse reaktief aan elemente toe te ken. Kom ons kyk hoe dit gedoen word. Gestel ons het die volgende objek met klasse:

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

Laat ons hierdie objek aan 'n etiket bind:

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

Gestel die teenwoordigheid van die klas done streep die teks van die etiket deur:

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

Laat ons 'n knoppie maak wat, wanneer dit gedruk word, die objek met style sal verander, en die klas done sal aktiveer:

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

Laat ons die ooreenstemmende metode skryf:

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

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

cssp.hidden {
  display: none;
}