Vue'да checkbox менен иштөө

Келгиле, азыр 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>