Vue-daky CSS klasslary bilen objekt reaktiwligi

CSS klasslary bilen objekt, elementlere klasslary reaktiw ýörite bermek üçin amatly bolmak üçin niýetlenendir. Geliň, munuň nädip edilýändigine göz aýlalyň. Aşakdaky klasslary bilen objektimiz bar bolsun:

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

Bu objekdi belli bir teg-e birikdireliň:

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

done klassynyň bolmagy, teg-iň tekstini çyzyň üstünden geçirsin:

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

Stil objekti üýtgedip, done klassyny işjeňleşdirýän düwmäni düzeliň:

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

Degişli metodu ýazalyň:

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

Aşakdaky CSS klasslary bilen objekt berlen:

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

Bu klassyň bolmagy elementi gizlesin:

p.hidden {
	display: none;
}

Klasslar bilen objekdi bir tekstli belli bir teg-e ulan.

Elementi görkezýän düwmäni düz.

Elementi gizleýän düwmäni düz.

Elementi tigleýän düwmäni düz (gizlenen bolsa görkez, görkezilen bolsa gizle).