Kereaktifan Objek dengan Kelas CSS dalam Vue

Objek dengan kelas CSS bertujuan untuk memudahkan penetapan kelas kepada elemen secara reaktif. Mari kita lihat bagaimana ia dilakukan. Katakan kita mempunyai objek berikut dengan kelas:

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

Mari ikat objek ini kepada tag:

<template>
	<p :class="styles">teks</p>
</template>

Katakan kehadiran kelas done membuat garis melalui teks tag:

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

Mari buat butang, klik padanya akan mengubah objek dengan gaya, mengaktifkan kelas done:

<template>
	<button @click="setDone">sembunyi</button>
</template>

Tulis kaedah yang sepadan:

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

Diberi objek berikut dengan kelas CSS:

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

Katakan kehadiran kelas ini menyembunyikan elemen:

p.hidden {
	display: none;
}

Gunakan objek dengan kelas pada sebarang tag dengan teks.

Buat butang, klik padanya akan menunjukkan elemen.

Buat butang, klik padanya akan menyembunyikan elemen.

Buat butang, klik padanya akan menogol elemen (tunjukkan, jika disembunyikan; sembunyikan, jika ditunjukkan).