Работа с 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 отмечен - абзац должен быть показан, а если не отмечен - то скрыт.