Vue-এ CSS ক্লাস সহ অবজেক্টের রিঅ্যাক্টিভিটি

CSS ক্লাস সহ একটি অবজেক্ট তৈরি করা হয়েছে এলিমেন্টগুলিতে রিঅ্যাক্টিভভাবে ক্লাস নির্ধারণ করা আরও সুবিধাজনক করার জন্য। চলুন দেখি কিভাবে এটি করা হয়। ধরা যাক আমাদের নিম্নলিখিত ক্লাস সহ একটি অবজেক্ট আছে:

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

চলুন এই অবজেক্টটি একটি ট্যাগের সাথে বাইন্ড করি:

<template>
	<p :class="styles">text</p>
</template>

ধরা যাক done ক্লাসের উপস্থিতি ট্যাগের টেক্সটটিকে ক্রস আউট করে:

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

চলুন একটি বাটন তৈরি করি, যাতে ক্লিক করলে স্টাইল অবজেক্টটি পরিবর্তন হবে, done ক্লাসটি সক্রিয় করে:

<template>
	<button @click="setDone">hide</button>
</template>

চলুন সংশ্লিষ্ট মেথডটি লিখি:

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

নিম্নলিখিত অবজেক্টটি দেওয়া আছে CSS ক্লাস সহ:

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

ধরা যাক এই ক্লাসের উপস্থিতি এলিমেন্টটি লুকিয়ে দেয়:

p.hidden {
	display: none;
}

ক্লাস সহ অবজেক্টটি প্রয়োগ করুন কিছু টেক্সট সহ একটি ট্যাগে।

একটি বাটন তৈরি করুন, যাতে ক্লিক করলে এলিমেন্টটি দেখাবে।

একটি বাটন তৈরি করুন, যাতে ক্লিক করলে এলিমেন্টটি লুকিয়ে দেবে।

একটি বাটন তৈরি করুন, যাতে ক্লিক করলে এলিমেন্টটি টগল করবে (দেখাবে, যদি লুকানো থাকে; লুকিয়ে দেবে, যদি দেখানো থাকে)।