Работа с 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>