Vue'дагы CSS классдары бар объекттин реактивдүүлүгү

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;
}

Кайсы болбосун тексттүү тегге классдары бар объектти колдонуңуз.

Элементти көрсөтө турган баскыч жасаңыз.

Элементти жашыра турган баскыч жасаңыз.

Элементти тогглой турган баскыч жасаңыз (жашырылганда көрсөтсүн; көрсөтүлгөндө жашырсын).