Kereaktifan Objek dengan Kelas CSS dalam Vue

Objek dengan kelas CSS bertujuan untuk memudahkan penetapan kelas kepada elemen secara reaktif. Mari kita lihat bagaimana ia dilakukan. Katakan kita mempunyai objek berikut dengan kelas:

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

Mari ikat objek ini kepada tag:

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

Katakan kehadiran kelas done membuat garis melalui teks tag:

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

Mari buat butang, klik padanya akan mengubah objek dengan gaya, mengaktifkan kelas done:

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

Tulis kaedah yang sepadan:

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

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

cssp.hidden {
  display: none;
}