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:

javascriptdata() {
  return {
    isActive: true,
    hasError: true,
  }
}

Fügen wir dem Element CSS-Klassen in Abhängigkeit vom Wert unserer Eigenschaften hinzu:

App.vue<template>
  <p :class="{active: isActive, error: hasError}">
    text
  </p>
</template>

javascriptdata() {
  return {
    isValid: true,
    isDisabled: true,
  }
}