Werk met checkbox in Vue

Laat ons nou kyk hoe die werk met checkbox plaasvind. Gestel ons het die volgende skakelaar:

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

Laat ons 'n eienskap checked skep, wat die werking van hierdie checkbox sal beheer:

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

Laat ons hierdie eienskap bind deur v-model:

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

As die checkbox gemerk is - sal die eienskap checked die waarde true hê, en as dit nie gemerk is nie - dan false. Om hiervan oortuig te wees, kan jy die waarde van die eienskap op die skerm vertoon, soos volg:

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

Met behulp van die ternêre operateur kan jy iets meer sinvols vertoon:

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

Gegee 'n checkbox. Gegee 'n paragraaf. Gebruik die direktief v-if om die volgende te doen: as die checkbox gemerk is - moet die paragraaf gewys word, en as dit nie gemerk is nie - moet dit weggesteek word.