Penggunaan Checkbox dalam Vue

Sekarang mari kita lihat bagaimana penggunaan checkbox. Katakan kita mempunyai togol berikut:

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

Mari buat sifat checked, yang akan mengawal operasi checkbox ini:

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

Mari ikat sifat ini melalui v-model:

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

Jika checkbox ditanda - sifat checked akan mempunyai nilai true, dan jika tidak ditanda - false. Untuk memastikannya, anda boleh memaparkan nilai sifat pada skrin, seperti ini:

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

Dengan menggunakan operator ternary, anda boleh memaparkan sesuatu yang lebih bermakna:

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