Trabalhando com checkbox em Vue

Vamos agora ver como funciona o trabalho com checkbox. Suponha que temos a seguinte caixa de seleção:

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

Vamos criar uma propriedade checked, que controlará o funcionamento deste checkbox:

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

Vamos vincular esta propriedade via v-model:

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

Se o checkbox estiver marcado - a propriedade checked terá o valor true, e se não estiver marcado - então false. Para verificar isso, você pode exibir o valor da propriedade na tela, assim:

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

Usando o operador ternário, você pode exibir algo mais significativo:

App.vue<template>
  <input type="checkbox" v-model="checked">
  <p>{{ checked ? 'sim' : 'não' }}</p>
</template>