Vue में checkbox के साथ काम करना

आइए अब देखते हैं कि checkbox के साथ काम कैसे होता है। मान लीजिए कि हमारे पास निम्नलिखित टॉगल है:

<template>
	<input type="checkbox">
</template>

आइए एक checked गुण बनाते हैं, जो इस checkbox के काम को नियंत्रित करेगा:

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

आइए इस गुण को v-model के माध्यम से बांधते हैं:

<template>
	<input type="checkbox" v-model="checked">
</template>

यदि checkbox चेक किया गया है - तो checked गुण का मान true होगा, और यदि चेक नहीं किया गया है - तो false होगा। इसके लिए आश्वस्त होने के लिए, गुण के मान को स्क्रीन पर प्रदर्शित किया जा सकता है, इस तरह:

<template>
	<input type="checkbox" v-model="checked">
	<p>{{ checked }}</p>
</template>

टर्नरी ऑपरेटर का उपयोग करके कुछ और अधिक सार्थक प्रदर्शित किया जा सकता है:

<template>
	<input type="checkbox" v-model="checked">
	<p>{{ checked ? 'हाँ' : 'नहीं' }}</p>
</template>

एक checkbox दिया गया है। एक पैराग्राफ दिया गया है। v-if डायरेक्टिव की मदद से निम्नलिखित करें: यदि checkbox चेक किया गया है - पैराग्राफ दिखाई देना चाहिए, और यदि चेक नहीं किया गया है - तो छिपा हुआ होना चाहिए।