Objektin reaktiivisuus CSS-luokkien kanssa Vue:ssa

Objektin CSS-luokkien tarkoituksena on tehdä luokkien reaktiivisesta määrittämisestä elementeille kätevää. Katsotaan kuinka se tehdään. Oletetaan, että meillä on seuraava objekti luokilla:

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

Liitetään tämä objekti tagiin:

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

Oletetaan, että luokan done presenssi yliviivaa tagin tekstin:

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

Tehdään painike, jonka napsautus muuttaa tyylien objektia, sisältäen luokan done:

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

Kirjoitetaan vastaava metodi:

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

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

cssp.hidden {
  display: none;
}