Reaktivitas Objek dengan Kelas CSS di Vue

Objek dengan kelas CSS dimaksudkan untuk memudahkan penentuan kelas pada elemen secara reaktif. Mari kita lihat bagaimana cara melakukannya. Misalkan kita memiliki objek berikut dengan kelas:

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

Mari kita ikat objek ini ke sebuah tag:

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

Misalkan keberadaan kelas done mencoret teks tag:

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

Mari buat tombol, yang ketika ditekan akan mengubah objek dengan gaya, menghidupkan kelas done:

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

Tuliskan metode yang sesuai:

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

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

cssp.hidden {
  display: none;
}