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>