Werk met checkbox in Vue

Laat ons nou kyk hoe die werk met checkbox plaasvind. Gestel ons het die volgende skakelaar:

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

Laat ons 'n eienskap checked skep, wat die werking van hierdie checkbox sal beheer:

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

Laat ons hierdie eienskap bind deur v-model:

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

As die checkbox gemerk is - sal die eienskap checked die waarde true hê, en as dit nie gemerk is nie - dan false. Om hiervan oortuig te wees, kan jy die waarde van die eienskap op die skerm vertoon, soos volg:

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

Met behulp van die ternêre operateur kan jy iets meer sinvols vertoon:

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