Checkbox'ide töötamine Vue's

Vaatame nüüd, kuidas toimub töö checkbox'idega. Oletame, et meil on järgmine lüliti:

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

Loome omaduse checked, mis haldab selle checkbox'i tööd:

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

Seome selle omaduse läbi v-model:

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

Kui checkbox on märgitud - on omaduse checked väärtuseks true, aga kui see pole märgitud - siis false. Et selles veenduda, võib omaduse väärtuse ekraanile väljastada, nagu nii:

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

Ternaarse operaatori abil saab väljastada midagi sisukamat:

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

Antud on checkbox. Antud on lõik. Kasutades direktiivi v-if, tehke järgmist: kui checkbox on märgitud - lõik peaks olema nähtav, aga kui see pole märgitud - siis peidetud.