Vue-də CSS sinifləri ilə obyektin reaktivliyi

CSS sinifləri olan obyekt, elementlərə sinifləri reaktiv şəkildə təyin etməyi rahatlaşdırmaq üçün nəzərdə tutulub. Gəlin bunun necə edildiyinə baxaq. Tutaq ki, bizdə aşağıdakı siniflər obyekti var:

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

Gəlin bu obyekti teq-ə bağlayaq:

<template>
	<p :class="styles">mətn</p>
</template>

Tutaq ki, done sinfinin olması mətni üstündən xətt çəkir:

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

Gəlin kliklədikdə stil obyektini dəyişərək, done sinfini aktivləşdirən bir düymə edək:

<template>
	<button @click="setDone">gizlət</button>
</template>

Uyğun metodu yazaq:

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

Aşağıdakı CSS sinifləri olan obyekt verilib:

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

Tutaq ki, bu sinfin olması elementi gizlədir:

p.hidden {
	display: none;
}

Sinif obyektini hansısa mətnli teq-ə tətbiq edin.

Elementi göstərəcək bir düymə edin.

Elementi gizlədəcək bir düymə edin.

Elementi toggle edəcək (gizlidirsə göstərəcək, görünürsə gizlədəcək) bir düymə edin.