Punimi me checkbox në Vue

Tani le të shohim se si ndodh puna me checkbox. Le të themi se kemi këtë çelës:

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

Le të krijojmë një pronë checked, e cila do të kontrollojë funksionimin e këtij checkbox:

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

Le ta lidhim këtë pronë përmes v-model:

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

Nëse checkbox është shënuar - pronaria checked do të ketë vlerën true, dhe nëse nuk është shënuar - atëherë false. Për t'u siguruar për këtë, mund të shfaqni vlerën e pronës në ekran, kështu:

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

Duke përdorur operatorin ternar mund të shfaqni diçka më kuptimplotë:

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