Trabalhando com checkbox em Vue

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

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

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

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

Vamos vincular esta propriedade via v-model:

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

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

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

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

Dado um checkbox. Dado um parágrafo. Usando a diretiva v-if, faça o seguinte: se o checkbox estiver marcado - o parágrafo deve ser exibido, e se não estiver marcado - então deve estar oculto.