Аб'ект з 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,
		},
	}
}

Прымяніце гэтыя класы да якого-небудзь тэга. Праверце, якія класы прымяніліся, а якія не.