Работа со checkbox во Vue

Ајде сега да погледнеме како се одвива работата со checkbox. Нека имаме следниот прекинувач:

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

Да направиме својство checked, кое ќе го управува функционирањето на овој checkbox:

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

Да го поврземе ова својство преку v-model:

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

Ако checkbox е означен - својството checked ќе има вредност true, а ако не е означен - тогаш false. За да се увериме во ова, можеме да ја прикажеме вредноста на својството на екранот, вака:

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

Со помош на тернарниот оператор може да прикажеме нешто позмислено:

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

Даден е checkbox. Даден е параграф. Со директивата v-if направете го следново: ако checkbox е означен - параграфот треба да се прикаже, а ако не е означен - тогаш да се сокрие.