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

Đối tượng chứa các lớp CSS có thể được viết trực tiếp làm giá trị cho thuộc tính class:

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

Các lớp có tên chứa dấu gạch ngang cần được đặt trong dấu ngoặc kép:

App.vue<template>
  <p :class="{active: true, 'has-error': false}">
    text
  </p>
</template>

javascript{active: true, valid: false}