CSS classes via data in Vue
CSS classes can be added to an element depending on the values of the properties of the data object. Let's look at an example. Let's say we have the following properties:
data() {
return {
isActive: true,
hasError: true,
}
}
Let's add CSS classes to the element depending on the value of our properties:
<template>
<p :class="{active: isActive, error: hasError}">
text
</p>
</template>
The following properties are given:
data() {
return {
isValid: true,
isDisabled: true,
}
}
Make sure that depending on the values of these properties, the corresponding CSS classes are added to the tag.
