CSS-Klassen über data in Vue
CSS-Klassen können einem Element
in Abhängigkeit von den Werten der Eigenschaften
des data-Objekts hinzugefügt werden.
Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben die folgenden
Eigenschaften:
data() {
return {
isActive: true,
hasError: true,
}
}
Fügen wir dem Element CSS-Klassen in Abhängigkeit vom Wert unserer Eigenschaften hinzu:
<template>
<p :class="{active: isActive, error: hasError}">
text
</p>
</template>
Gegeben sind die folgenden Eigenschaften:
data() {
return {
isValid: true,
isDisabled: true,
}
}
Sorgen Sie dafür, dass in Abhängigkeit von den Werten dieser Eigenschaften im Tag die entsprechenden CSS-Klassen hinzugefügt werden.
