CSS classes via data in Vue

CSS classes can be added to an element depending on the values ​​of the properties of the data object. Let's look at an example. Let's say we have the following properties:

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

Let's add CSS classes to the element depending on the value of our properties:

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

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