Vue में रिएक्टिव कंडीशन

आइए condition को reactive बनाते हैं। उदाहरण के लिए, एक बटन पर क्लिक करने पर element छिप जाए। मान लें कि हमारे पास निम्नलिखित पैराग्राफ है:

<template>
	<p v-if="visible">text</p>
</template>

आइए हमारा पैराग्राफ शुरू में दिखाई दे रहा हो:

data() {
	return {
		visible: true,
	}
}

अब एक बटन बनाएं, जिस पर क्लिक करने पर पैराग्राफ छिप जाए:

<template>
	<button @click="hide">hide</button>
	<p v-if="visible">text</p>
</template>

बाउंड method visible property को false में बदल देगा, जिससे हमारा पैराग्राफ छिप जाएगा:

methods: {
	hide: function() {
		this.visible = false;
	}
}

एक पैराग्राफ और एक बटन दिया गया है। मान लें कि पैराग्राफ शुरू में छिपा हुआ है। एक बटन बनाएं जो पैराग्राफ को दिखाएगा।

एक पैराग्राफ और दो बटन दिए गए हैं। मान लें पहला बटन पैराग्राफ दिखाता है, और दूसरा - इसे छिपाता है।

पिछले कार्य को इस तरह संशोधित करें कि स्क्रीन पर हमेशा एक ही बटन दिखाई दे: यदि पैराग्राफ दिखाई दे रहा है, तो छिपाने के लिए बटन, और यदि छिपा हुआ है - तो दिखाने के लिए बटन।