Làm việc với checkbox trong Vue

Bây giờ hãy xem cách làm việc với checkbox. Giả sử chúng ta có một công tắc chuyển đổi như sau:

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

Hãy tạo một thuộc tính checked, sẽ điều khiển hoạt động của checkbox này:

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

Hãy liên kết thuộc tính này qua v-model:

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

Nếu checkbox được đánh dấu - thuộc tính checked sẽ có giá trị true, còn nếu không được đánh dấu - thì là false. Để xác nhận điều này, có thể hiển thị giá trị của thuộc tính ra màn hình, như thế này:

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

Với toán tử bậc ba có thể hiển thị một cái gì đó có ý nghĩa hơn:

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

Cho một checkbox. Cho một đoạn văn. Sử dụng chỉ thị v-if hãy làm như sau: nếu checkbox được đánh dấu - đoạn văn sẽ được hiển thị, còn nếu không được đánh dấu - thì sẽ bị ẩn.