Kufanya kazi na checkbox katika Vue

Wacha sasa tuangalie jinsi inavyofanyika kazi na checkbox. Wacha tuwe na kigeuzi kifuatacho:

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

Tutengeneze sifa checked, ambayo itadhibiti utendakazi wa checkbox hii:

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

Wacha tuunganishe sifa hii kupitia v-model:

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

Ikiwa checkbox imewekwa alama - sifa checked itakuwa na thamani true, na ikiwa haujawekwa alama - basi false. Ili kuhakikisha hili, unaweza kuonyesha thamani ya sifa kwenye skrini, kama hivi:

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

Kwa kutumia kiendeshaji cha ternary unaweza kuonyesha kitu kingine chenye maana zaidi:

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