Kufanya kazi na checkbox katika Vue

Wacha sasa tuangalie jinsi inavyofanyika kazi na checkbox. Wacha tuwe na kigeuzi kifuatacho:

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

Tutengeneze sifa checked, ambayo itadhibiti utendakazi wa checkbox hii:

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

Wacha tuunganishe sifa hii kupitia v-model:

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

Ikiwa checkbox imewekwa alama - sifa checked itakuwa na thamani true, na ikiwa haujawekwa alama - basi false. Ili kuhakikisha hili, unaweza kuonyesha thamani ya sifa kwenye skrini, kama hivi:

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

Kwa kutumia kiendeshaji cha ternary unaweza kuonyesha kitu kingine chenye maana zaidi:

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

Imetolewa checkbox. Imetolewa aya. Kwa kutumia diraktiva v-if fanya yafuatayo: ikiwa checkbox imewekwa alama - aya inapaswa kuonyeshwa, na ikiwa haujawekwa alama - basi ifichwe.