CSS-klasser via data i Vue
CSS-klasser kan tilføjes til et element
afhængigt af værdierne af egenskaber
i data-objektet. Lad os se på
et eksempel. Antag, at vi har følgende
egenskaber:
data() {
return {
isActive: true,
hasError: true,
}
}
Lad os tilføje CSS-klasser til elementet afhængigt af værdien af vores egenskaber:
<template>
<p :class="{active: isActive, error: hasError}">
text
</p>
</template>
Følgende egenskaber er givet:
data() {
return {
isValid: true,
isDisabled: true,
}
}
Sørg for, at afhængigt af værdierne af disse egenskaber bliver de tilsvarende CSS-klasser tilføjet til tagget.
