การทำงานกับ 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 ถูกเลือก - ย่อหน้าต้องถูกแสดง และหาก ไม่ถูกเลือก - ต้องถูกซ่อน