Vue'дагы CSS класс объекти

CSS классдар ошондой эле объекттерде сакталышы мүмкүн. Бул учурда класс аттары объекттин ачкычтары болот, ал эми объекттин элементтери логикалык маанилер болот. Эгер маани true болсо, анда класс элементке кошулат, эгер false болсо, анда кошулбайт.

Келгиле, практикада сынап көрөлү. Бизде төмөнкүдөй класс объекти бар дейли:

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

Бул объектти тегге байлап көрөлү:

App.vue<template>
  <p :class="obj">текст</p>
</template>

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