Объект с CSS классами в Vue

CSS классы могут также хранится в объектах. При этом имена классов будут ключами объекта, а элементами объекта будут логические значения. Если значение будет true, то класс будет добавлен элементу, а если false, то не будет.

Давайте попробуем на практике. Пусть у нас есть следующий объект с классами:

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

Привяжем этот объект к тегу:

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

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