Klasy CSS przez data w Vue

Klasy CSS można dodawać do elementu w zależności od wartości właściwości obiektu data. Spójrzmy na przykład. Załóżmy, że mamy następujące właściwości:

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

Dodajmy elementowi klasy CSS w zależności od wartości naszych właściwości:

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

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