Trabajo con checkbox en Vue

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

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

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

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

Vinculamos esta propiedad mediante v-model:

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

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

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

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

Se da un checkbox. Se da un párrafo. Usando la directiva v-if haga lo siguiente: si el checkbox está marcado - el párrafo debe mostrarse, y si no está marcado - entonces oculto.