Vue da CSS klasslari obyekti

CSS klasslari shuningdek obyektlarda saqlanishi mumkin. Bunda klass nomlari obyektning kalitlari bo'ladi, obyektning elementlari esa mantiqiy qiymatlar bo'ladi. Agar qiymat true bo'lsa, klass elementga qo'shiladi, agar false bo'lsa, qo'shilmaydi.

Keling, amalda sinab ko'raylik. Quyidagi klasslar obyekti mavjud bo'lsin:

data() {
	return {
		obj: {
			active: true,
			valid:  false,
		},
	}
}

Keling, ushbu obyektni tegga bog'laymiz:

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

Quyidagi CSS klasslari obyekti berilgan:

data() {
	return {
		obj: {
			done: true,
			selected:  false,
		},
	}
}

Ushbu klasslarni biror tegga qo'llang. Qaysi klasslar qo'llanganligini, qaysilari qo'llanmaganligini tekshiring.