CSS osztályok adattal Vue-ban

CSS osztályokat adhatunk egy elemhez a data objektum tulajdonságainak értékétől függően. Nézzük egy példán. Tegyük fel, hogy a következő tulajdonságaink vannak:

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

Adjunk hozzá CSS osztályokat az elemhez a tulajdonságaink értékétől függően:

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

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