Delo s checkbox v Vue

Poglejmo si zdaj, kako poteka delo z checkbox. Recimo, da imamo naslednje stikalo:

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

Ustvarimo lastnost checked, ki bo upravljala z delovanjem tega checkbox:

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

Povežimo to lastnost prek v-model:

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

Če je checkbox označen - bo lastnost checked imela vrednost true, če pa ni označen - pa false. Da se prepričamo v tem, lahko izpišemo vrednost lastnosti na zaslon, takole:

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

S pomočjo ternarnega operatorja lahko izpišemo kaj bolj smiselnega:

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

Podan je checkbox. Podan je odstavek. Z direktivo v-if naredite naslednje: če je checkbox označen - naj bo odstavek prikazan, če pa ni označen - naj bo skrit.