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

Կիրառեք դասերով օբյեկտը ինչ-որ տեքստով թեգի վրա։

Կատարեք կոճակ, որի սեղմումը կցուցադրի տարրը։

Կատարեք կոճակ, որի սեղմումը կթաքցնի տարրը։

Կատարեք կոճակ, որի սեղմումը կթոգլի տարրը (ցուցադրել, եթե թաքնված է; թաքցնել, եթե ցուցադրված է)։