CSS класы праз data у Vue

CSS класы можна дадаваць элементу ў залежнасці ад значэнняў уласцівасцяў аб'екта data. Паглядзім на прыкладзе. Хай у нас ёсць наступныя ўласцівасці:

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

Дадамо элементу CSS класы ў залежнасці ад значэння нашых уласцівасцяў:

App.vue<template>
  <p :class="{active: isActive, error: hasError}">
    тэкст
  </p>
</template>

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