I am working with vuejs and I want to dynamically change the class based on the data value. If the number is negative, I need to apply the .neg class, and if it's positive, I need to use the .pos class.
Everything is functioning properly, except for applying the class.
The data set includes values like: 5, -7, 8, -2, 4, -9 etc
myArray: function () {
var test = [5, -7, 8, -2, 4, -9];
return test;
},
<div v-for="data in myArray">
<div v-bind:class="{'neg': data < 0, 'pos': data > 0}"></div>
<div id="my">{{ data }}</div>
</div>
.pos {background-color: green;}
.neg {background-color: red;}
Any assistance would be greatly appreciated.