Práce s checkbox ve Vue

Pojďme se nyní podívat, jak probíhá práce s checkbox. Předpokládejme, že máme následující přepínač:

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

Vytvořme vlastnost checked, která bude řídit činnost tohoto checkbox:

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

Připojme tuto vlastnost pomocí v-model:

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

Pokud je checkbox zaškrtnut - vlastnost checked bude mít hodnotu true, a pokud není zaškrtnut - tak false. Abychom se o tom přesvědčili, můžeme vypsat hodnotu vlastnosti na obrazovku, takto:

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

S pomocí ternárního operátoru lze vypisovat něco smysluplnějšího:

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

Je dán checkbox. Je dán odstavec. Pomocí direktivy v-if udělejte následující: pokud je checkbox zaškrtnut - odstavec by měl být zobrazen, a pokud není zaškrtnut - tak skryt.