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,
  }
}