Classes CSS via data dans Vue

Les classes CSS peuvent être ajoutées à un élément en fonction des valeurs des propriétés de l'objet data. Regardons un exemple. Supposons que nous ayons les propriétés suivantes :

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

Ajoutons des classes CSS à l'élément en fonction de la valeur de nos propriétés :

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

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