Работа з 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 адзначаны - абзац павінен быць паказаны, а калі не адзначаны - то схаваны.