Checkboxin käsittely Vuesa

Katsotaan nyt, miten checkbox:n kanssa työskennellään. Oletetaan, että meillä on seuraava kytkin:

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

Luodaan ominaisuus checked, joka hallinnoi tämän checkbox:n toimintaa:

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

Yhdistetään tämä ominaisuus v-model:n avulla:

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

Jos checkbox on valittu - ominaisuuden checked arvo on true, ja jos ei ole valittu - niin false. Varmistaaksesi tämän voidaan tulostaa ominaisuuden arvo näytölle, näin:

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

Ternäärioperaattoria käyttäen voidaan tulostaa jotain mielekkäämpää:

<template>
	<input type="checkbox" v-model="checked">
	<p>{{ checked ? 'kyllä' : 'ei' }}</p>
</template>

Annettu checkbox. Annettu kappale. Käytä direktiiviä v-if tehdäksesi seuraavaa: jos checkbox on valittu - kappaleen tulee olla näkyvissä, ja jos ei ole valittu - niin piilotettuna.