Работа с checkbox във Vue

Нека сега видим как се осъществява работата с checkbox. Да предположим, че имаме следния превключвател:

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

Нека създадем свойство checked, което ще управлява работата на този checkbox:

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

Нека свържем това свойство чрез v-model:

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

Ако checkbox е отметнат - свойството checked ще има стойност true, а ако не е отметнат - то false. За да се убедим в това, можем да изведем стойността на свойството на екрана, ето така:

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

С помощта на тернарния оператор можем да извеждаме нещо по-смислено:

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

Даден е checkbox. Даден е абзац. С помощта на директивата v-if направете следното: ако checkbox е отметнат - абзацът трябва да бъде показан, а ако не е отметнат - то да бъде скрит.