Vue-da checkbox ilə iş

Gəlin indi baxaq, necə baş verir checkbox ilə iş. Tutaq ki, bizdə var aşağıdakı keçid:

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

Gəlin checked xassəsini edək, bu da idarə edəcək işini bu checkbox:

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

Gəlin bu xassəni v-model ilə bağlayaq:

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

Əgər checkbox işarələnibsə - checked xassəsi true dəyərinə sahib olacaq, əgər işarələnməyibsə - onda false. Buna əmin olmaq üçün ekranda xassənin dəyərini göstərə bilərsiniz, belə:

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

Üçlü operator köməyi ilə daha mənalı bir şey göstərmək olar:

<template>
	<input type="checkbox" v-model="checked">
	<p>{{ checked ? 'yes' : 'no' }}</p>
</template>

checkbox verilib. Abzas verilib. v-if direktivası ilə aşağıdakıları edin: əgər checkbox işarələnibsə - abzas göstərilməlidir, əgər işarələnməyibsə - onda gizlədilməlidir.