如何根据数字正负给标签设置不同的样式？

Question

vue中,如果对象的属性数字大于0设置.style1,小于0设置.style2,等于0设置.style3 ，该如何设置？

data : {   data1: 12,   data2: -12,   data3: 0
}<div :class="">{{data.data1}}</div><div :class="">{{data.data2}}</div><div :class="">{{data.data3}}</div>

Answer 1

你可以用methods来实现，这样简洁一些。Html：<div&nbsp;id="dataList"> &nbsp;<div&nbsp;:class="setColor(data1)">{{data1}}</div> &nbsp;<div&nbsp;:class="setColor(data2)">{{data2}}</div> &nbsp;<div&nbsp;:class="setColor(data3)">{{data3}}</div></div>JS:new&nbsp;Vue({&nbsp;&nbsp;el:&nbsp;'#dataList',&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;&nbsp;data1:&nbsp;12,&nbsp;&nbsp;&nbsp;data2:&nbsp;-12,&nbsp;&nbsp;&nbsp;data3:&nbsp;0 &nbsp;&nbsp;},&nbsp;&nbsp;methods:{&nbsp;&nbsp;&nbsp;&nbsp;setColor:&nbsp;function(dataVal){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(dataVal&nbsp;>&nbsp;0)&nbsp;return&nbsp;'red';&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(dataVal&nbsp;<&nbsp;0)&nbsp;return&nbsp;'green';&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;'default'; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} });Css:.red&nbsp;{&nbsp;&nbsp;color:&nbsp;red; }.green&nbsp;{&nbsp;&nbsp;color:&nbsp;green; }.default&nbsp;{&nbsp;&nbsp;color:&nbsp;gray; }