Vue js: change CSS with v-if and v-else statment-CodePudding

in my Vue JS project i wanted to show data from API and its working good, my only problem is when i showed {{flat.status}} below in my code i wanted to play with CSS for ex: if status==Available let text color be green , and when status==Sold let text color be red and etc ..

is there a way to do it?

<b-th v-for="(flat, index) in Building.flats" :key="index" >
               <p> {{flat.status}} </p>
</b-th>

CodePudding user response：

Yes! You can do this in a few ways, but the simplest is just to use conditional styles tags. In the :style, just write code!

<p :style=flat.status === 'available' ? 'color: green;' : 'color: 'red'>{{ flat.status }}</p>

If you'd like more CSS control, just use conditional classes.

<p :https://vuejs.org/v2/guide/class-and-style.html" rel="nofollow noreferrer">class binding styles you can look into for more information. They will give you other ways to do all this as well.
For multiple classes (similar example in the link I provided):
<div :>{{ flat.name }}</div>