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

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 id="dataList">
 <div :class="setColor(data1)">{{data1}}</div>
 <div :class="setColor(data2)">{{data2}}</div>
 <div :class="setColor(data3)">{{data3}}</div></div>

JS:

new Vue({  el: '#dataList',  data: {   data1: 12,   data2: -12,   data3: 0
  },  methods:{    setColor: function(dataVal){      if(dataVal > 0) return 'red';      if(dataVal < 0) return 'green';      return 'default';
    }
  }
});

Css:

.red {  color: red;
}.green {  color: green;
}.default {  color: gray;
}