Object with CSS classes in Vue
CSS classes can also be stored in objects. In this case, the class names will be the keys of the object, and the elements of the object will be logical values. If the value is true, then the class will be added to the element, and if false, then it will not.
Let's try it in practice. Let's say we have the following object with classes:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Let's bind this object to the tag:
<template>
<p :class="obj">text</p>
</template>
Given the following object with CSS classes:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Apply these classes to some tag. Check which classes are applied and which are not.
