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