Vue-da checkbox bilan ishlash

Keling endi, qanday qilib checkbox bilan ishlash amalga oshirilishiga ahamiyat beraylik. Faraz qilaylik, bizda quyidagi o'zgartirgich mavjud:

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

Keling, ushbu checkbox ning ishlashini boshqaradigan checked xususiyatini yaratamiz:

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

Keling, ushbu xususiyatni v-model orqali bog'laymiz:

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

Agar checkbox belgilangan bo'lsa - checked xususiyati true qiymatga ega bo'ladi, agar belgilanmagan bo'lsa - false bo'ladi. Bunga ishonch hosil qilish uchun, xususiyatning qiymatini ekranda ko'rsatishingiz mumkin, mana shu tarzda:

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

Ternary operatori yordamida ma'noliroq narsalarni ko'rsatish mumkin:

App.vue<template>
  <input type="checkbox" v-model="checked">
  <p>{{ checked ? 'ha' : 'yo\'q' }}</p>
</template>