Objekt s CSS triedami vo Vue

CSS triedy môžu byť tiež uložené v objektoch. Pričom mená tried budú kľúčmi objektu a prvkami objektu budú logické hodnoty. Ak bude hodnota true, tak trieda bude pridaná elementu, a ak false, tak nebude.

Vyskúšajme to v praxi. Nech máme nasledujúci objekt s triedami:

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

Previažme tento objekt k elementu:

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

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