Travailler avec les checkbox dans Vue

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

<template>
	<input type="checkbox">
</template>

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

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

Relions cette propriété via v-model :

<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 :

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

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

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

Une checkbox est donnée. Un paragraphe est donné. En utilisant la directive v-if, faites ce qui suit : si la checkbox est cochée - le paragraphe doit être affiché, et si elle n'est pas cochée - il doit être masqué.