Working with checkboxes in Vue

Now let's see how to work with checkbox. Let's say we have the following switch:

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

Let's create a property checked that will control the operation of this checkbox:

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

Let's bind this property via v-model:

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

If checkbox is checked, the property checked will have the value true, and if it is not checked, then false. To verify this, you can display the value of the property on the screen, like this:

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

Using the ternary operator, you can output something more meaningful:

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

Given checkbox. Given a paragraph. Using the v-if directive, do the following: if checkbox is checked, the paragraph should be shown, and if unchecked, it should be hidden.