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

මෙම පන්ති කිසියම් ටැගයකට යොදන්න. කුමන පන්ති යොදනු ලැබුවත්, කුමන පන්ති යොදනු නොලැබුවත් පරීක්ෂා කරන්න.