Vue में data के माध्यम से CSS कक्षाएं

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