Рад са 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 ? 'да' : 'не' }}</p>
</template>

Дат је checkbox. Дат је пасус. Употребом директиве v-if урадите следеће: ако је checkbox означен - пасус треба да буде приказан, а ако није означен - онда да буде сакривен.