CSS lớp thông qua data trong Vue

Có thể thêm CSS lớp vào phần tử tùy thuộc vào giá trị của các thuộc tính trong đối tượng data. Hãy xem ví dụ. Giả sử chúng ta có các thuộc tính sau:

javascriptdata() {
  return {
    isActive: true,
    hasError: true,
  }
}

Hãy thêm các CSS lớp vào phần tử tùy thuộc vào giá trị của các thuộc tính của chúng ta:

App.vue<template>
  <p :class="{active: isActive, error: hasError}">
    text
  </p>
</template>

javascriptdata() {
  return {
    isValid: true,
    isDisabled: true,
  }
}