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

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

App.vue<template>
  <input type="checkbox">
</template>

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

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

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

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

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

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

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

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