การทำงานกับ checkbox ใน Vue

ตอนนี้มาดูกันว่าการทำงานกับ checkbox เกิดขึ้นอย่างไร สมมติว่าเรามี สวิตช์ดังต่อไปนี้:

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

มาสร้างคุณสมบัติ checked ซึ่งจะควบคุมการทำงานของ checkbox นี้:

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

ผูกคุณสมบัตินี้ผ่าน v-model:

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

หาก checkbox ถูกเลือก - คุณสมบัติ checked จะมีค่าเป็น true และหาก ไม่ถูกเลือก - จะเป็น false เพื่อให้แน่ใจ ในเรื่องนี้ สามารถแสดงค่า ของคุณสมบัติบนหน้าจอได้ ดังนี้:

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

การใช้ตัวดำเนินการเงื่อนไขสามารถ แสดงผลสิ่งที่มีความหมายมากขึ้นได้:

App.vue<template>
  <input type="checkbox" v-model="checked">
  <p>{{ checked ? 'ใช่' : 'ไม่' }}</p>
</template>