Vue да CSS класслари объекти

CSS класслари шунингдек объектларда сақланиши мумкин. Бу ҳолда класс номлари объектнинг калитлари бўлади, эса объект элементлари мантиқий қийматлар бўлади. Агар қиймат true бўлса, унда класс элементга қўшилади, агар false бўлса, қўшилмайди.

Амалиётда синаб кўрайлик. Бизда куйидаги объект класслар билан бўлсин:

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

Бу объектни тегга боглаймиз:

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

Куйидаги объект берилган CSS класслар билан:

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

Бу классларни бирор тегга қўлланг. Қайси класслар қўшилганини, қайсилари қўшилмаганини текшириб кўринг.