ปฏิกิริยาของวัตถุที่มีคลาส CSS ใน Vue

วัตถุที่มีคลาส CSS นั้นมีวัตถุประสงค์ เพื่อให้สามารถกำหนดคลาสให้กับองค์ประกอบต่างๆ ได้อย่างสะดวกผ่านระบบปฏิกิริยา มาดูกันว่าสิ่งนี้ทำได้อย่างไร สมมติว่าเรามีวัตถุ ที่มีคลาสดังต่อไปนี้:

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

ผูกวัตถุนี้กับแท็ก:

App.vue<template>
  <p :class="styles">ข้อความ</p>
</template>

สมมติว่าการมีคลาส done ขีดฆ่าข้อความของแท็ก:

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

สร้างปุ่มที่การคลิก จะเปลี่ยนวัตถุที่มีสไตล์ โดยเปิดใช้งานคลาส done:

App.vue<template>
  <button @click="setDone">ซ่อน</button>
</template>

เขียนเมธอดที่เกี่ยวข้อง:

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

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

cssp.hidden {
  display: none;
}