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

Сынып объектісін кез келген мәтіні бар тегке қолданыңыз.

Элементті көрсететін батырма жасаңыз.

Элементті жасыратын батырма жасаңыз.

Элементті тогглейтін батырма жасаңыз (жасырын болса көрсетсін, көрініп тұрса жасырсын).