Реактивии объект бо CSS дарсҳо дар Vue

Объект бо CSS дарсҳо барои он таҳия шудааст, ки ба таври реактивӣ дарсҳоро ба элементҳо таъйин кардан муосир бошад. Биёед бубинем, ки ин чӣ гуна анҷом дода мешавад. Фарз мекунем, ки мо объекти зеринро бо дарсҳо дорем:

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

Ин объектро ба тег пайваст мекунем:

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

Фарз мекунем, ки мавҷудияти дарси done матни тегро хат мекашад:

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

Тугмае созем, ки пахши он объекти бо дарсҳоро тағйир диҳад, дарси done-ро фаъол кунад:

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

Усули мувофиқро менависем:

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

Объекти зерин бо CSS дарсҳо дода шудааст:

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

Фарз мекунем, ки мавҷудияти ин дарс элементро пинҳон мекунад:

p.hidden {
	display: none;
}

Объекти бо дарсҳоро ба ягон тег бо матн татбиқ кунед.

Тугмае созед, ки пахши он элементро нишон диҳад.

Тугмае созед, ки пахши он элементро пинҳон кунад.

Тугмае созед, ки пахши он элементро toggle кунад (нишон диҳад, агар пинҳон аст; пинҳон кунад, агар нишон дода шудааст).