Trabajo con checkbox en Vue

Veamos ahora cómo se realiza el trabajo con checkbox. Supongamos que tenemos el siguiente interruptor:

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

Hagamos una propiedad checked, que controlará el funcionamiento de este checkbox:

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

Vinculamos esta propiedad mediante v-model:

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

Si el checkbox está marcado - la propiedad checked tendrá el valor true, y si no está marcado - entonces false. Para convencerse de esto, se puede mostrar el valor de la propiedad en la pantalla, así:

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

Con el operador ternario se puede mostrar algo más significativo:

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