Vue-da CSS klasslari bilan obyekt reaktivligi

CSS klasslari bilan obyekt elementlarga klasslarni qulay tarzda reaktiv ravishda tayinlash uchun mo'ljallangan. Keling, buni qanday qilinishini ko'ramiz. Faraz qilaylik, bizda quyidagi klasslar bilan obyekt mavjud:

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

Keling, ushbu obyektni tegga bog'laymiz:

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

Faraz qilaylik, done klassining mavjudligi teg matnini chizib tashlaydi:

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

Keling, bosilganda uslublar obyektini o'zgartirib, done klassini yoqadigan tugma yarataylik:

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

Keling, mos keladigan metodni yozamiz:

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

Quyidagi CSS klasslari bilan obyekt berilgan:

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

Faraz qilaylik, ushbu klassning mavjudligi elementni yashiradi:

p.hidden {
	display: none;
}

Klasslar obyektini ba'zi bir matn teglariga qo'llang.

Elementni ko'rsatadigan tugma yarating.

Elementni yashiradigan tugma yarating.

Elementni toggle qiladigan (yashiringan bo'lsa ko'rsatadigan, ko'rsatilgan bo'lsa yashiradigan) tugma yarating.