Vue'da CSS Sınıfı Nesnesi

CSS sınıfları ayrıca nesnelerde tutulabilir. Bu durumda sınıf isimleri nesnenin anahtarları olur ve nesnenin elemanları mantıksal değerler olur. Eğer değer true ise, sınıf elemana eklenecektir, eğer false ise, eklenmeyecektir.

Hadi pratikte deneyelim. Şu sınıf nesnemiz olduğunu varsayalım:

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

Bu nesneyi bir etikete bağlayalım:

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

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