Classes CSS via data em Vue

As classes CSS podem ser adicionadas a um elemento dependendo dos valores das propriedades do objeto data. Vamos ver com um exemplo. Suponha que temos as seguintes propriedades:

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

Vamos adicionar classes CSS ao elemento dependendo do valor das nossas propriedades:

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

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