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.