Đối tượng với các lớp CSS trong Vue

Các lớp CSS cũng có thể được lưu trữ trong các đối tượng. Trong đó, tên các lớp sẽ là khóa của đối tượng, và các phần tử của đối tượng sẽ là các giá trị logic. Nếu giá trị là true, thì lớp sẽ được thêm vào phần tử, còn nếu là false, thì sẽ không.

Hãy thử thực hành. Giả sử chúng ta có đối tượng sau với các lớp:

javascriptdata() {
  return {
    obj: {
      active: true,
      valid:  false,
    },
  }
}

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

App.vue<template>
  <p :class="obj">text</p>
</template>

javascriptdata() {
  return {
    obj: {
      done: true,
      selected:  false,
    },
  }
}