Objek dengan Kelas CSS dalam Vue

Kelas CSS juga boleh disimpan dalam objek. Dalam kes ini, nama kelas akan menjadi kunci objek, dan elemen objek akan menjadi nilai boolean. Jika nilainya true, maka kelas akan ditambahkan pada elemen, dan jika false, maka tidak akan.

Mari kita cuba dalam praktik. Katakan kita mempunyai objek berikut dengan kelas:

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

Ikat objek ini kepada tag:

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

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