Vue-da checkbox bilan ishlash

Keling endi, qanday qilib checkbox bilan ishlash amalga oshirilishiga ahamiyat beraylik. Faraz qilaylik, bizda quyidagi o'zgartirgich mavjud:

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

Keling, ushbu checkbox ning ishlashini boshqaradigan checked xususiyatini yaratamiz:

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

Keling, ushbu xususiyatni v-model orqali bog'laymiz:

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

Agar checkbox belgilangan bo'lsa - checked xususiyati true qiymatga ega bo'ladi, agar belgilanmagan bo'lsa - false bo'ladi. Bunga ishonch hosil qilish uchun, xususiyatning qiymatini ekranda ko'rsatishingiz mumkin, mana shu tarzda:

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

Ternary operatori yordamida ma'noliroq narsalarni ko'rsatish mumkin:

<template>
	<input type="checkbox" v-model="checked">
	<p>{{ checked ? 'ha' : 'yo\'q' }}</p>
</template>

checkbox berilgan. Abzats berilgan. v-if direktivasidan foydalanib quyidagilarni bajaring: agar checkbox belgilangan bo'lsa - abzats ko'rsatilishi kerak, agar belgilanmagan bo'lsa - yashirilsin.