Bekerja dengan checkbox di Vue

Sekarang mari kita lihat, bagaimana bekerja dengan checkbox. Misalkan kita memiliki pengalih berikut:

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

Mari buat properti checked, yang akan mengontrol kerja checkbox ini:

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

Mari ikat properti ini melalui v-model:

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

Jika checkbox dicentang - properti checked akan memiliki nilai true, dan jika tidak dicentang - maka false. Untuk memastikannya, Anda dapat menampilkan nilai properti di layar, seperti ini:

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

Dengan menggunakan operator ternary, Anda dapat menampilkan sesuatu yang lebih bermakna:

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

Diberikan checkbox. Diberikan paragraf. Dengan menggunakan direktif v-if lakukan hal berikut: jika checkbox dicentang - paragraf harus ditampilkan, dan jika tidak dicentang - maka disembunyikan.