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:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Přivažme tento objekt k tagu:
<template>
<p :class="obj">text</p>
</template>
Je dán následující objekt s CSS třídami:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Aplikujte tyto třídy na nějaký tag. Zkontrolujte, které třídy byly aplikovány, a které ne.
