CSS-klassen via data in Vue
CSS-klassen kunnen aan een element worden toegevoegd
afhankelijk van de waarden van de eigenschappen
van het data object. Laten we kijken naar een
voorbeeld. Stel dat we de volgende
eigenschappen hebben:
data() {
return {
isActive: true,
hasError: true,
}
}
Laten we CSS-klassen aan het element toevoegen afhankelijk van de waarde van onze eigenschappen:
<template>
<p :class="{active: isActive, error: hasError}">
text
</p>
</template>
De volgende eigenschappen zijn gegeven:
data() {
return {
isValid: true,
isDisabled: true,
}
}
Zorg ervoor dat, afhankelijk van de waarden van deze eigenschappen, de overeenkomstige CSS-klassen aan de tag worden toegevoegd.
