CSS-luokkaolio Vuesa
CSS-luokat voivat myös tallentua
olioihin. Tässä tapauksessa luokkien nimet
ovat olion avaimia ja olion elementit
ovat loogisia arvoja.
Jos arvo on true,
luokka lisätään elementtiin,
ja jos false, niin sitä ei lisätä.
Kokeillaan käytännössä. Oletetaan, että meillä on seuraava luokkaolio:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Sidotaan tämä olio tagiin:
<template>
<p :class="obj">teksti</p>
</template>
Annettu on seuraava olio CSS-luokilla:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Sovella nämä luokat johonkin tagiin. Tarkista, mitkä luokat otettiin käyttöön, ja mitkä eivät.
