vue数据变动的问题

Question

vue获取json数据，比方第一次获取的price为5.2，第二次为5.8，怎么让这个数字变色？

即：如果第二次比第一次大，则为红色；小为绿色，一样则为黑色。

 

Answer 1

<style type="text/css">
	.red {
		color: red;
	}
	.green {
		color: green;
	}
	.black {
		color: black;
	}
</style>

<div class="layui-container" style="margin:10px auto">
  <div class="beijing">
      <div class="layui-card">
      	<div class="layui-card-header" style="text-align:center;"><h3>比特币行情</h3></div>
        <div id="mainlist" v-cloak>
            <div class="layui-card-body">
                <table class="layui-table">
                  <thead>
                    <tr>
                      <th align="left">交易所</th>
                      <th align="left">最新价格</th>
                      <th align="right" class="layui-hide-xs">买一价</th>
                      <th align="right">卖一价</th>
                      <th align="right">最高价格</th>
                      <th align="right">最低价格</th>
                      <th align="right">成交量</th></th>
                    </tr> 
                  </thead>
                  <tbody>
                    <tr v-for="(item,index) in sitea" :key=index>
                      <td align="left">{{item.from}}</td>
                      <td align="right" class="layui-hide-xs" :class="item.color">${{item.last|numFilter}}</td>
                      <td align="right" class="layui-hide-xs">${{item.buy|numFilter}}</td>
                      <td align="right">${{item.sell|numFilter}}</td>
                      <td align="right">${{item.high|numFilter}}</td>
                      <td align="right">${{item.low|numFilter}}</td>
                      <td align="right">{{item.vol|numFilter}}</td>
                    </tr>
                  </tbody>
                </table>
            </div>
        </div>
      </div>
  </div>
</div>

<script>
    new Vue({
        el: '#mainlist',
        data: {
            sitea: []
        },

        methods: {
            getData() {
                axios.get('https://api.btc126.com/btc.php')
                    .then((res) => {
                        //console.log(res.data.data);
                        var arr = this.sitea.map(v => v.last );
                        this.sitea = res.data;
                        this.sitea.forEach(function(v, i){
                            v.color = v.last>arr[i] ? "red" : v.last<arr[i] ? "green" : "black";
                        });
                        // this.sitea.sort(function(a,b){//排序
                        //     return b.issued - a.issued
                        //     })
                    })
                    .catch(error => {
                        console.log(error);
                    })
            }
        },
     	created() {
            this.getData();
        },
        filters: {
            numFilter(value) { //保留小数点后两位
                let realVal = ''
                realVal = parseFloat(value);
                return realVal.toFixed(2);
            },
            numPercent(value) {
                let realVal = ''
                realVal = (parseFloat(value) * 100).toFixed(2);
                return realVal + '%' ;
            }
        },
        mounted() {
            if (this.timer) {
                clearInterval(this.timer)
            } else {
                this.timer = setInterval(() => {
                    this.getData()
                }, 10000)
            }
        },
        destroyed() {
            clearInterval(this.timer)
        },
    })
</script>