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:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Previažme tento objekt k elementu:
<template>
<p :class="obj">text</p>
</template>
Daný je nasledujúci objekt s CSS triedami:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Aplikujte tieto triedy na nejaký element. Skontrolujte, ktoré triedy sa aplikovali, a ktoré nie.
