Tính phản ứng của đối tượng với các lớp CSS trong Vue

Đối tượng với các lớp CSS được thiết kế để thuận tiện cho việc gán các lớp cho các phần tử một cách phản ứng. Hãy xem cách thực hiện điều này. Giả sử chúng ta có đối tượng với các lớp sau:

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

Hãy liên kết đối tượng này với một thẻ:

App.vue<template>
  <p :class="styles">văn bản</p>
</template>

Giả sử sự hiện diện của lớp done gạch ngang văn bản của thẻ:

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

Hãy tạo một nút bấm, nhấp vào đó sẽ thay đổi đối tượng chứa kiểu, bao gồm cả lớp done:

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

Hãy viết phương thức tương ứng:

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

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

cssp.hidden {
  display: none;
}