Tính phản ứng của đối tượng với các lớp CSS trong Vue

Đối tượng với các lớp CSS được thiết kế để thuận tiện cho việc gán các lớp cho các phần tử một cách phản ứng. Hãy xem cách thực hiện điều này. Giả sử chúng ta có đối tượng với các lớp sau:

data() {
	return {
		styles: {
			done: false,
		},
	}
}

Hãy liên kết đối tượng này với một thẻ:

<template>
	<p :class="styles">văn bản</p>
</template>

Giả sử sự hiện diện của lớp done gạch ngang văn bản của thẻ:

p.done {
	text-decoration: line-through;
}

Hãy tạo một nút bấm, nhấp vào đó sẽ thay đổi đối tượng chứa kiểu, bao gồm cả lớp done:

<template>
	<button @click="setDone">ẩn</button>
</template>

Hãy viết phương thức tương ứng:

methods: {
	setDone: function() {
		this.styles.done = true;
	}
}

Cho đối tượng sau với các lớp CSS:

data() {
	return {
		obj: {
			hidden: true,
		},
	}
}

Giả sử sự hiện diện của lớp này ẩn phần tử:

p.hidden {
	display: none;
}

Áp dụng đối tượng với các lớp vào một thẻ nào đó có chứa văn bản.

Tạo một nút bấm, nhấp vào đó sẽ hiển thị phần tử.

Tạo một nút bấm, nhấp vào đó sẽ ẩn phần tử.

Tạo một nút bấm, nhấp vào đó sẽ chuyển đổi trạng thái phần tử (hiển thị, nếu đang ẩn; ẩn, nếu đang hiển thị).