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

Бұл кластарды кез келген тегге қолданыңыз. Қай кластар қолданылғанын, қайсысы қолданылмағанын тексеріңіз.