Vue में CSS क्लासेस के साथ ऑब्जेक्ट रिएक्टिविटी

CSS क्लासेस वाला ऑब्जेक्ट इसलिए बनाया गया है ताकि तत्वों को रिएक्टिव तरीके से क्लासेस आसानी से नियत की जा सकें। आइए देखते हैं कि यह कैसे किया जाता है। मान लीजिए कि हमारे पास निम्नलिखित क्लासेस वाला ऑब्जेक्ट है:

javascriptdata() {
  return {
    styles: {
      done: false,
    },
  }
}

आइए इस ऑब्जेक्ट को एक टैग से बांधें:

App.vue<template>
  <p :class="styles">text</p>
</template>

मान लीजिए कि done क्लास की उपस्थिति टैग के टेक्स्ट को काटती है:

cssp.done {
  text-decoration: line-through;
}

आइए एक बटन बनाएं, जिस पर क्लिक करने से स्टाइल्स वाला ऑब्जेक्ट बदल जाएगा, और done क्लास सक्रिय हो जाएगी:

App.vue<template>
  <button @click="setDone">hide</button>
</template>

आइए संबंधित मेथड लिखें:

App.vuemethods: {
  setDone: function() {
    this.styles.done = true;
  }
}

javascriptdata() {
  return {
    obj: {
      hidden: true,
    },
  }
}

cssp.hidden {
  display: none;
}