Darbas su checkbox Vue

Dabar pažiūrėkime, kaip vyksta darbas su checkbox. Tarkime, kad turime šį perjungiklį:

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

Sukurkime savybę checked, kuri valdys šio checkbox veikimą:

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

Priskirkime šią savybę per v-model:

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

Jei checkbox pažymėtas - savybė checked turės reikšmę true, o jei nepažymėtas - tai false. Norėdami tuo įsitikinti, galite išvesti savybės reikšmę į ekraną, štai taip:

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

Naudojant ternary operatorių galima rodyti ką nors prasmingesnio:

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

Duotas checkbox. Duotas pastraipa. Naudodami direktyvą v-if padarykite taip: jei checkbox pažymėtas - pastraipa turi būti rodoma, o jei nepažymėtas - tai paslėpta.