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 ? 'yes' : 'no' }}</p>
</template>