Travailler avec les checkbox dans Vue

Voyons maintenant comment se passe le travail avec les checkbox. Supposons que nous ayons l'interrupteur suivant :

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

Créons une propriété checked, qui contrôlera le fonctionnement de cette checkbox :

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

Relions cette propriété via v-model :

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

Si la checkbox est cochée - la propriété checked aura la valeur true, et si elle n'est pas cochée - alors false. Pour s'en assurer, on peut afficher la valeur de la propriété à l'écran, comme ceci :

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

Avec l'opérateur ternaire, on peut afficher quelque chose de plus significatif :

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