Praca z checkbox w Vue

Przyjrzyjmy się teraz, jak przebiega praca z checkbox. Załóżmy, że mamy następujący przełącznik:

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

Stwórzmy właściwość checked, która będzie sterować działaniem tego checkbox:

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

Powiążmy tę właściwość przez v-model:

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

Jeśli checkbox jest zaznaczony - właściwość checked będzie miała wartość true, a jeśli nie jest zaznaczony - to false. Aby się o tym przekonać, można wyświetlić wartość właściwości na ekranie, w ten sposób:

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

Za pomocą operatora trójargumentowego można wyświetlać coś bardziej sensownego:

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

Dany jest checkbox. Dany jest akapit. Za pomocą dyrektywy v-if zrób następujące: jeśli checkbox jest zaznaczony - akapit powinien być pokazany, a jeśli nie jest zaznaczony - to ukryty.