Lavorare con le checkbox in Vue

Ora diamo un'occhiata a come funziona il lavoro con checkbox. Supponiamo di avere il seguente interruttore:

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

Creiamo una proprietà checked, che controllerà il funzionamento di questa checkbox:

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

Colleghiamo questa proprietà tramite v-model:

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

Se la checkbox è selezionata - la proprietà checked avrà valore true, e se non è selezionata - allora false. Per convincersene, puoi visualizzare il valore della proprietà sullo schermo, in questo modo:

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

Utilizzando l'operatore ternario si può visualizzare qualcosa di più significativo:

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

Data una checkbox. Dato un paragrafo. Utilizzando la direttiva v-if fate quanto segue: se la checkbox è selezionata - il paragrafo deve essere mostrato, mentre se non è selezionata - allora deve essere nascosto.