Objekt s CSS třídami ve Vue

CSS třídy mohou být také uloženy v objektech. V takovém případě budou názvy tříd klíči objektu a prvky objektu budou logické hodnoty. Pokud bude hodnota true, tak bude třída přidána elementu, a pokud false, tak nebude.

Zkusme to v praxi. Předpokládejme, že máme následující objekt s třídami:

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

Přivažme tento objekt k tagu:

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

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