A checkbox kezelése Vue-ban

Nézzük meg most, hogyan történik a checkbox kezelése. Tegyük fel, hogy van a következő kapcsolónk:

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

Készítsünk egy checked tulajdonságot, amely irányítja ennek a checkboxnak a működését:

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

Kössük ezt a tulajdonságot a v-model segítségével:

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

Ha a checkbox be van jelölve - a checked tulajdonság értéke true lesz, ha nincs bejelölve - akkor false. Hogy ezt megbizonyosodjunk róla, kiírhatjuk a tulajdonság értékét a képernyőre, így:

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

A ternális operátor segítségével kiírhatunk valami értelmesebbet:

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

Adott egy checkbox. Adott egy bekezdés. A v-if direktíva segítségével tegye a következőt: ha a checkbox be van jelölve - a bekezdés legyen megjelenítve, ha nincs bejelölve - akkor legyen elrejtve.