Αντίδραση Αντικειμένου με CSS Κλάσεις στο Vue

Ένα αντικείμενο με CSS κλάσεις προορίζεται για να επιτρέπει την εύκολη αντιδραστική ανάθεση κλάσεων σε στοιχεία. Ας δούμε πώς γίνεται αυτό. Ας υποθέσουμε ότι έχουμε το ακόλουθο αντικείμενο με κλάσεις:

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

Ας δέσουμε αυτό το αντικείμενο σε μια ετικέτα:

<template>
	<p :class="styles">κείμενο</p>
</template>

Ας υποθέσουμε ότι η παρουσία της κλάσης done διαγράφει το κείμενο της ετικέτας:

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

Ας δημιουργήσουμε ένα κουμπί, το πάτημα του οποίου θα αλλάζει το αντικείμενο με τα στυλ, ενεργοποιώντας την κλάση done:

<template>
	<button @click="setDone">απόκρυψη</button>
</template>

Ας γράψουμε την αντίστοιχη μέθοδο:

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

Δίνεται το ακόλουθο αντικείμενο με CSS κλάσεις:

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

Ας υποθέσουμε ότι η παρουσία αυτής της κλάσης κρύβει το στοιχείο:

p.hidden {
	display: none;
}

Εφαρμόστε το αντικείμενο με τις κλάσεις σε κάποια ετικέτα με κείμενο.

Δημιουργήστε ένα κουμπί, το πάτημα του οποίου θα εμφανίζει το στοιχείο.

Δημιουργήστε ένα κουμπί, το πάτημα του οποίου θα κρύβει το στοιχείο.

Δημιουργήστε ένα κουμπί, το πάτημα του οποίου θα εναλλάσσει την κατάσταση του στοιχείου (να το εμφανίζει, αν είναι κρυμμένο· να το κρύβει, αν είναι εμφανές).