CSS sinifleri data vasitesile Vue-da

CSS sinifleri elementə data obyektinin xassələrinin qiymətlərindən asılı olaraq əlavə etmək olar. Bir nümunəyə baxaq. Tutaq ki, bizim aşağıdakı xassələrimiz var:

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

Gəlin xassələrimizin qiymətindən asılı olaraq elementə CSS sinifləri əlavə edək:

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

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