Обект с 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,
    },
  }
}