vue计算属性和方法

Question

通过计算属性及方法，算出差距值，如果是负数则字体是红色，正数是绿色

<div class="maintain_mon">
    <p class="tit">个人累计FYC（元）</p>
    <ul v-for="item in numbs">
      <li><i>{{item.checkValue}}</i>
        <p>考核值</p></li>
      <li><i>{{item.currentValue}}</i>
        <p>当前值</p></li>
      <li>
        <i>{{(item.currentValue - item.checkValue).toFixed(2)}}</i>
        <p>差距</p>
      </li>
    </ul>
</div>
<div class="promote" v-for="module in arr">
  <div class="maintain_mon" v-for="item in module.promote">
    <p class="tit">{{item.tit}}</p>
    <ul v-for="item1 in item.assess">
      <li><i>{{item1.checkValue}}</i>
        <p>考核值</p></li>
      <li><i>{{item1.currentValue}}</i>
        <p>当前值</p></li>
      <li>
        <i>{{item1.currentValue - item1.checkValue}.toFixed(2)}</i>
        <p>差距</p></li>
    </ul>
  </div>
</div>

效果图

怎么写判断？

Answer 1

js:

data () {
  return {
   
  }
},
methods: {
  diff: function (currentValue, checkValue) {
    return (currentValue - checkValue).toFixed(2)
  }
}

html:

 <li>
    <i :class='[diff(25, 5) > 0 ? "green-font" : "red-font"]'>{{diff(25, 5)}}</i>
    <p>差距</p>
 </li>