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 белгиланган бўлса - абзац кўрсатилсин, агар белгиланмаган бўлса - яширилсин.