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 চেক করা থাকে - অনুচ্ছেদটি দেখানো উচিত, এবং যদি চেক না করা থাকে - তাহলে লুকানো উচিত।