Werken met checkbox in Vue

Laten we nu bekijken hoe de werking van een checkbox verloopt. Stel dat we de volgende schakelaar hebben:

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

Laten we een eigenschap checked maken, die de werking van deze checkbox zal besturen:

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

Laten we deze eigenschap binden via v-model:

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

Als de checkbox is aangevinkt - heeft de eigenschap checked de waarde true, en als deze niet is aangevinkt - dan false. Om hiervan overtuigd te raken, kan men de waarde van de eigenschap op het scherm weergeven, zoals hier:

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

Met behulp van de ternaire operator kan men iets zinvollers weergeven:

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

Gegeven een checkbox. Gegeven een alinea. Gebruik de directive v-if om het volgende te doen: als de checkbox is aangevinkt - moet de alinea worden getoond, en als deze niet is aangevinkt - dan verborgen.