Reaktivitas Objek dengan Kelas CSS di Vue

Objek dengan kelas CSS dimaksudkan untuk memudahkan penentuan kelas pada elemen secara reaktif. Mari kita lihat bagaimana cara melakukannya. Misalkan kita memiliki objek berikut dengan kelas:

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

Mari kita ikat objek ini ke sebuah tag:

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

Misalkan keberadaan kelas done mencoret teks tag:

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

Mari buat tombol, yang ketika ditekan akan mengubah objek dengan gaya, menghidupkan kelas done:

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

Tuliskan metode yang sesuai:

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

Diberikan objek berikut dengan kelas CSS:

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

Misalkan keberadaan kelas ini menyembunyikan elemen:

p.hidden {
	display: none;
}

Terapkan objek dengan kelas pada suatu tag dengan teks.

Buat tombol, yang ketika ditekan akan menampilkan elemen.

Buat tombol, yang ketika ditekan akan menyembunyikan elemen.

Buat tombol, yang ketika ditekan akan mengalihkan elemen (menampilkan, jika disembunyikan; menyembunyikan, jika ditampilkan).