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

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

Ин классҳоро ба ягон тег татбиқ кунед. Санҷед, кадом классҳо татбиқ шуданд, ва кадомҳо нашуданд.