Arbeid med checkbox i Vue

La oss nå se på hvordan arbeid med checkbox fungerer. La oss si at vi har følgende bryter:

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

La oss lage en egenskap checked, som vil styre arbeidet til denne checkbox:

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

La oss koble denne egenskapen via v-model:

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

Hvis checkbox er avmerket - vil egenskapen checked ha verdien true, og hvis den ikke er avmerket - så false. For å forsikre seg om dette, kan man vise verdien av egenskapen på skjermen, slik:

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

Ved hjelp av den ternære operatoren kan man vise noe mer meningsfylt:

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

Det gis en checkbox. Det gis et avsnitt. Bruk direktivet v-if for å gjøre følgende: hvis checkbox er avmerket - skal avsnittet vises, og hvis det ikke er avmerket - skal det skjules.