Objekto su CSS klasėmis reaktyvumas Vue

Objektas su CSS klasėmis skirtas tam, kad būtų patogiai reaktyviai priskiriamos klasės elementams. Pažiūrėkime, kaip tai daroma. Tarkime, kad turime tokį objektą su klasėmis:

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

Pririškime šį objektą prie teg'o:

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

Tegul klasės done buvimas perbraukia teg'o tekstą:

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

Sukurkime mygtuką, kurio paspaudimas pakeis objektą su stiliais, įjungdamas klasę done:

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

Parašykime atitinkamą metodą:

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

Duotas toks objektas su CSS klasėmis:

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

Tegul šios klasės buvimas paslepia elementą:

p.hidden {
	display: none;
}

Pritaikykite objektą su klasėmis kokiam nors teg'ui su tekstu.

Padarykite mygtuką, kurio paspaudimas rodytų elementą.

Padarykite mygtuką, kurio paspaudimas slėptų elementą.

Padarykite mygtuką, kurio paspaudimas perjungtų elementą (rodytų, jei paslėptas; slėptų, jei rodomas).