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

CSS क्लासेस ऑब्जेक्ट्स में भी स्टोर हो सकती हैं। इस मामले में क्लास के नाम ऑब्जेक्ट की keys होंगी, और ऑब्जेक्ट के एलिमेंट बूलियन वैल्यू होंगी। अगर वैल्यू true होगी, तो क्लास एलिमेंट में जोड़ दी जाएगी, और अगर false होगी, तो नहीं जोड़ी जाएगी।

आइए प्रैक्टिस में ट्राई करते हैं। मान लीजिए कि हमारे पास निम्नलिखित ऑब्जेक्ट है जिसमें क्लासेस हैं:

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

इस ऑब्जेक्ट को एक टैग से बाइंड करते हैं:

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

निम्नलिखित ऑब्जेक्ट दिया गया है जिसमें CSS क्लासेस हैं:

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

इन क्लासेस को किसी टैग में अप्लाई करें। जांचें कि कौन सी क्लासेस अप्लाई हुईं, और कौन सी नहीं।