Práca s checkbox vo Vue

Pozrime sa teraz, ako prebieha práca s checkbox. Predpokladajme, že máme nasledujúci prepínač:

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

Vytvorme vlastnosť checked, ktorá bude riadiť fungovanie tohto checkbox:

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

Prepojme túto vlastnosť pomocou v-model:

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

Ak je checkbox zaškrtnutý - vlastnosť checked bude mať hodnotu true, a ak nie je zaškrtnutý - tak false. Aby sme sa o tom presvedčili, môžeme vypísať hodnotu vlastnosti na obrazovku, takto:

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

Pomocou ternárneho operátora môžeme vypísať niečo zmysluplnejšie:

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

Daný checkbox. Daný odsek. Pomocou direktívy v-if urobte nasledovné: ak je checkbox zaškrtnutý - odsek by mal byť zobrazený, a ak nie je zaškrtnutý - tak skrytý.