Penggunaan Checkbox dalam Vue

Sekarang mari kita lihat bagaimana penggunaan checkbox. Katakan kita mempunyai togol berikut:

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

Mari buat sifat checked, yang akan mengawal operasi checkbox ini:

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

Mari ikat sifat ini melalui v-model:

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

Jika checkbox ditanda - sifat checked akan mempunyai nilai true, dan jika tidak ditanda - false. Untuk memastikannya, anda boleh memaparkan nilai sifat pada skrin, seperti ini:

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

Dengan menggunakan operator ternary, anda boleh memaparkan sesuatu yang lebih bermakna:

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

Diberi checkbox. Diberi perenggan. Dengan menggunakan arahan v-if, lakukan yang berikut: jika checkbox ditanda - perenggan hendaklah dipaparkan, dan jika tidak ditanda - ia hendaklah disembunyikan.