CSS класови преку data во Vue

CSS класови може да се додаваат на елемент во зависност од вредностите на својствата на објектот data. Да погледнеме на пример. Нека имаме следниве својства:

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

Да додадеме CSS класови на елементот во зависност од вредноста на нашите својства:

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

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