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 მონიშნულია - აბზაცი უნდა იყოს ნაჩვენები, ხოლო თუ არ არის მონიშნული - მაშინ დამალული.