Vue-এ CSS ক্লাস সহ অবজেক্ট

CSS ক্লাসগুলিও অবজেক্টে সংরক্ষণ করা যেতে পারে। এই ক্ষেত্রে, ক্লাসের নামগুলি হবে অবজেক্টের কী, এবং অবজেক্টের এলিমেন্টগুলি হবে লজিক্যাল মান। যদি মানটি true হয়, তবে ক্লাসটি এলিমেন্টে যোগ করা হবে, আর যদি false হয়, তবে যোগ করা হবে না।

আসুন অনুশীলনে চেষ্টা করি। ধরুন আমাদের নিম্নলিখিত অবজেক্টটি ক্লাস সহ রয়েছে:

data() {
	return {
		obj: {
			active: true,
			valid:  false,
		},
	}
}

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

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

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

data() {
	return {
		obj: {
			done: true,
			selected:  false,
		},
	}
}

এই ক্লাসগুলি কোনো একটি ট্যাগে প্রয়োগ করুন। যাচাই করুন যে কোন ক্লাসগুলি প্রয়োগ হয়েছে, আর কোনগুলি হয়নি।