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

Класслар билан объектни бирор тегга матн билан қўлланг.

Элементни кўрсатадиган тугма яратинг.

Элементни яширадиган тугма яратинг.

Элементни тогглайдиган (яшириқ бўлса кўрсатади, кўринаётган бўлса яширадиган) тугма яратинг.