Set class using data source from JavaScript

I want to build a list of data source received from JavaScript in vue.js

<div class="{{item.clockIn}}"></div>

Where this {{item.clockIn}} return two type of value that is true and false.

.true {
content: 'IN';
color: blue;
}
.true {
content: 'OUT';
color: red;
}

But it’s not working as i thought. Anyone can help me with this.

Answer

First of all, you seem to have a typo in your class definition. The second .true class should be .false. Then you can use something like this:

<div :class="item.clockIn ? 'true' : 'false'"></div>

This makes the class property reactive and getting the value related to the item.clockIn directly.