Punimi me checkbox në Vue

Tani le të shohim se si ndodh puna me checkbox. Le të themi se kemi këtë çelës:

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

Le të krijojmë një pronë checked, e cila do të kontrollojë funksionimin e këtij checkbox:

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

Le ta lidhim këtë pronë përmes v-model:

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

Nëse checkbox është shënuar - pronaria checked do të ketë vlerën true, dhe nëse nuk është shënuar - atëherë false. Për t'u siguruar për këtë, mund të shfaqni vlerën e pronës në ekran, kështu:

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

Duke përdorur operatorin ternar mund të shfaqni diçka më kuptimplotë:

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

Është dhënë një checkbox. Është dhënë një paragraf. Me ndihmën e direktivës v-if bëni sa vijon: nëse checkbox është shënuar - paragrafi duhet të shfaqet, dhe nëse nuk është shënuar - atëherë duhet të fshihet.