Αντικείμενο με CSS κλάσεις στο Vue

Οι CSS κλάσεις μπορούν επίσης να αποθηκεύονται σε αντικείμενα. Σε αυτήν την περίπτωση, τα ονόματα των κλάσεων θα είναι τα κλειδιά του αντικειμένου, και τα στοιχεία του αντικειμένου θα είναι λογικές τιμές. Εάν η τιμή είναι true, τότε η κλάση θα προστεθεί στο στοιχείο, και εάν είναι false, τότε δεν θα προστεθεί.

Ας δοκιμάσουμε στην πράξη. Ας υποθέσουμε ότι έχουμε το ακόλουθο αντικείμενο με κλάσεις:

data() {
	return {
		obj: {
			active: true,
			valid:  false,
		},
	}
}

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

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

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

data() {
	return {
		obj: {
			done: true,
			selected:  false,
		},
	}
}

Εφαρμόστε αυτές τις κλάσεις σε κάποια ετικέτα. Ελέγξτε ποιες κλάσεις εφαρμόστηκαν, και ποιες όχι.