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 ? 'yes' : 'no' }}</p>
</template>

Տրված է checkbox։ Տրված է պարբերություն։ Օգտագործելով v-if դիրեկտիվը՝ արեք հետևյալը. եթե checkbox-ը նշված է - պարբերությունը պետք է ցուցադրվի, իսկ եթե նշված չէ - ապա թաքնվի։