Vue'да checkbox менен иштөө

Келгиле, азыр 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 ? 'ооба' : 'жок' }}</p>
</template>

checkbox берилген. Абзац берилген. v-if директивасынын жардамы менен төмөнкүдөй жасаңыз: эгерде checkbox белгиленсе - абзац көрсөтүлсүн, ал эми эгерде белгиленбесе - жашырылсын.