Объект с 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,
		},
	}
}

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