Clases CSS a través de data en Vue

Las clases CSS se pueden añadir a un elemento en función de los valores de las propiedades del objeto data. Veamos un ejemplo. Supongamos que tenemos las siguientes propiedades:

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

Añadamos clases CSS al elemento dependiendo del valor de nuestras propiedades:

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

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