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

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;
}

Answer 2

• css

          .class1{
              color:red
          }
          .class2{
              color:green
          }
          .class3{
              color:yellow
          }
  

• html

  <div id="app">
    <div v-bind:class="{'class1':data1>0,'class2':data1===0,'class3':data1<0}">{{ data1 }}</p>
    <div v-bind:class="{'class1':data2>0,'class2':data2===0,'class3':data2<0}">{{ data2 }}</p>
    <div v-bind:class="{'class1':data3>0,'class2':data3===0,'class3':data3<0}">{{ data3 }}</p>
  </div>

• js

  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!',
     data1: 12,
     data2: -12,
     data3: 0
    }
  })

可以实现，但是冗余代码太多，不知道具体要实现的是啥效果，有可优化的地方，具体可以看：

• VUE 官方文档：https://cn.vuejs.org/v2/guide...
• 菜鸟教程：http://www.runoob.com/vue2/vu...