Ву-дар чекбокс кор кардан

Биёед акнун бубинем, ки кор бо чекбокс чӣ гуна сурат мегирад. Бигзор мо як табдилдиҳандаи зеринро дошта бошем:

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

Хосияти checked-ро созем, ки кор кардани ин чекбокс-ро идора мекунад:

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

Ин хосиятро тавассути v-model пайвастем:

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

Агар чекбокс нишона зада шавад - хосияти 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>