Arbejde med checkbox i Vue

Lad os nu se på, hvordan arbejde med checkbox foregår. Lad os sige, at vi har følgende kontroller:

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

Lad os lave en egenskab checked, som vil styre arbejdet med denne checkbox:

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

Lad os binde denne egenskab via v-model:

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

Hvis checkbox er markeret - vil egenskaben checked have værdien true, og hvis den ikke er markeret - så false. For at blive overbevist om dette, kan du udskrive værdien af egenskaben på skærmen, sådan her:

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

Ved hjælp af den ternære operator kan man udskrive noget mere meningsfuldt:

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

Der er givet en checkbox. Der er givet et afsnit. Brug direktivet v-if til at gøre følgende: hvis checkbox er markeret - skal afsnittet vises, og hvis det ikke er markeret - skal det skjules.