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

क्लासेस वाले ऑब्जेक्ट को किसी टेक्स्ट वाले टैग पर लागू करें।

एक बटन बनाएं, जिस पर क्लिक करने से तत्व दिखाई देगा।

एक बटन बनाएं, जिस पर क्लिक करने से तत्व छुप जाएगा।

एक बटन बनाएं, जिस पर क्लिक करने से तत्व टॉगल होगा (छुपा हुआ है तो दिखाएगा; दिख रहा है तो छुपाएगा)।