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