Objektu ar CSS klasēm reaktivitāte Vue

Objekts ar CSS klasēm ir paredzēts tam, lai ērti varētu reaktīvi piešķirt klases elementiem. Apskatīsim, kā tas tiek darīts. Pieņemsim, ka mums ir šāds objekts ar klasēm:

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

Piesaistīsim šo objektu tagam:

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

Pieņemsim, ka klases done klātbūtne nosvītro teksta tagu:

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

Izveidosim pogu, kuras nospiešana mainīs objektu ar stiliem, ieslēdzot klasi done:

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

Uzrakstīsim atbilstošo metodi:

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

Dots šāds objekts ar CSS klasēm:

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

Pieņemsim, ka šīs klases klātbūtne slēpj elementu:

p.hidden {
	display: none;
}

Pielietojiet objektu ar klasēm kādam tagam ar tekstu.

Izveidojiet pogu, kuras nospiešana rādīs elementu.

Izveidojiet pogu, kuras nospiešana slēps elementu.

Izveidojiet pogu, kuras nospiešana pārslēgs elementu (rādīs, ja paslēpts; slēps, ja redzams).