Работа с checkbox в Vue

Давайте теперь посмотрим, как происходит работа с 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>