Vue-da CSS klasslarni data orqali qo'llash

CSS klasslarni elementga data obyektining xususiyatlari qiymatlariga qarab qo'shish mumkin. Keling, bir misol ko'rib chiqaylik. Faraz qilaylik, bizda quyidagi xususiyatlar mavjud:

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

Elementga CSS klasslarni xususiyatlarimizning qiymatiga qarab qo'shamiz:

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

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