vue数据变动的问题

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

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

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

watch?  newval和oldval比较

不懂哎，就是想看下大神写个代码。

用的是什么框架呢？数据展示用的什么组件？是table么

layui

也无所谓，只要能实现这个功能就好。

你试试？也可以打印出来看

1

computed: {
	priceChange () {
		return this.price
	},
},
watch: {
	priceChange(newNum,oldNum){
		console.log(newNum,oldNum)
		if(eval(newNum)>eval(oldNum)){
					
		}else{
					
		}
				
	}
}
methods: {


}

watch: {

priceChange(newNum,oldNum){

if(eval(newNum)>eval(oldNum)){

//在回显价格的那个标签上设置ID，然后根据ID获取document对象设置style即可

}else{

}
 

}

我的代码，谢谢。 

<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">${{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);
				this.sitea = res.data;
				// 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>

<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" :style="{color: 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] ? "#f00" : v.last<arr[i] ? "#0f0" : "#000";
                        });
                        // 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>
</body>

感谢@天际的海浪 ，基本上可以了，想再问下 如何绑定class样式呢？