Vue တွင် checkbox နှင့် အလုပ်လုပ်ခြင်း

ယခု Vue framework ထဲမှာ checkbox နှင့် အလုပ်လုပ်ပုံကို ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့မှာ အောက်ပါ ပြောင်းလဲခလုတ်ရှိသည်ဆိုပါစို့။

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

checked ဆိုသည့် property တစ်ခုကို လုပ်ကြပါစို့။ ထို property သည် ဒီ checkbox ၏ အလုပ်လုပ်မှုကို ထိန်းချုပ်ပေးပါမည်။

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

ထို property ကို v-model ဖြင့် ချိတ်ဆက်ကြပါမည်။

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

checkbox ကို အမှန်ခြစ်ထားပါက checked property ၏ တန်ဖိုးသည် true ဖြစ်ပြီး၊ အမှန်မခြစ်ထားပါက false ဖြစ်ပါမည်။ ဤအချက်ကို သေချာစေရန် property ၏ တန်ဖိုးကို အောက်ပါအတိုင်း စာမျက်နှာပေါ်တွင် ပြသကြည့်နိုင်ပါသည်။

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

Ternary operator ကို အသုံးပြု၍ ပိုမိုအဓိပ္ပါယ်ရှိသော အရာများကို ပြသနိုင်ပါသည်။

<template>
	<input type="checkbox" v-model="checked">
	<p>{{ checked ? 'yes' : 'no' }}</p>
</template>

checkbox တစ်ခုနှင့် စာပိုဒ်တစ်ခု ပေးထားပါသည်။ v-if directive ကို အသုံးပြု၍ အောက်ပါအတိုင်း လုပ်ဆောင်ပါ။ checkbox ကို အမှန်ခြစ်ထားပါက စာပိုဒ်ကို ပြသရမည်၊ အမှန်မခြစ်ထားပါက ဝှက်ထားရမည်။