Obiekt z klasami CSS w Vue
Klasy CSS mogą również być przechowywane w
obiektach. W tym przypadku nazwy klas
będą kluczami obiektu, a elementami
obiektu będą wartości logiczne.
Jeśli wartość będzie true,
to klasa zostanie dodana do elementu,
a jeśli false, to nie zostanie.
Spróbujmy w praktyce. Załóżmy, że mamy następujący obiekt z klasami:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Przywiążmy ten obiekt do znacznika:
<template>
<p :class="obj">text</p>
</template>
Dany jest następujący obiekt z klasami CSS:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Zastosuj te klasy do dowolnego znacznika. Sprawdź, które klasy zostały zastosowane, a które nie.
