CSS-luokat datan kautta Vuesa
CSS-luokkia voidaan lisätä elementtiin
riippuen data-objektin ominaisuuksien
arvoista. Katsotaan esimerkkiä. Oletetaan, että meillä on seuraavat
ominaisuudet:
data() {
return {
isActive: true,
hasError: true,
}
}
Lisätään elementille CSS-luokkia riippuen ominaisuuksiemme arvoista:
<template>
<p :class="{active: isActive, error: hasError}">
text
</p>
</template>
Annettu seuraavat ominaisuudet:
data() {
return {
isValid: true,
isDisabled: true,
}
}
Tee niin, että riippuen näiden ominaisuuksien arvoista, tagiin lisätään vastaavat CSS-luokat.
