Làm việc với checkbox trong Vue

Bây giờ hãy xem cách làm việc với checkbox. Giả sử chúng ta có một công tắc chuyển đổi như sau:

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

Hãy tạo một thuộc tính checked, sẽ điều khiển hoạt động của checkbox này:

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

Hãy liên kết thuộc tính này qua v-model:

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

Nếu checkbox được đánh dấu - thuộc tính checked sẽ có giá trị true, còn nếu không được đánh dấu - thì là false. Để xác nhận điều này, có thể hiển thị giá trị của thuộc tính ra màn hình, như thế này:

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

Với toán tử bậc ba có thể hiển thị một cái gì đó có ý nghĩa hơn:

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