Rad sa checkbox u Vue

Hajde sada da pogledamo kako se radi sa checkbox. Pretpostavimo da imamo sledeći prekidač:

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

Napravimo svojstvo checked, koje će upravljati radom ovog checkbox:

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

Povežimo ovo svojstvo preko v-model:

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

Ako je checkbox označen - svojstvo checked će imati vrednost true, a ako nije označen - onda false. Da bismo se uverili u to, možemo prikazati vrednost svojstva na ekranu, ovako:

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

Pomoću ternarnog operatora možemo prikazati nešto značajnije:

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

Dat je checkbox. Dat je pasus. Pomoću direktive v-if uradite sledeće: ako je checkbox označen - pasus treba da bude prikazan, a ako nije označen - onda sakriven.