vue中倒计时的用法

后台传递过来创建时间，前端进行倒计时十分钟，十分钟之后更改订单状态 把待支付改为过期或者其他 来验证订单状态

 <template slot-scope="text, record" slot="status">
            <span :class="tostatusclass(text)">{{text}} <br> <label v-if="record.countDown > 0">{{Countdown(record.countDown)}}</label></span>　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　//订单状态（未提交）　　　　　　　　　　　　　　　　　　　　　将毫秒数转化为分+秒

        </template>

　　

  this.$axios.post('url',this.orderData,
                    {
                        headers:{
                            'token':localStorage.getItem('token')
                        }
                    }).then(res=>{
　　　　　　　　　　　　//我们在请求过来后台数据中就先处理时间 
                    let times = Date.parse(new Date()) //当前时间，本来应该由后台传回服务器时间，但是后台没有传，暂时已浏览器本机时间来计算
                    let expires = 10*60*1000 //有效时长，默认是10分钟，本来应该由后台给出，但是后台没给，暂时写死
                    for ( let i = 0 ; i<res.data.results.rows.length ; i++){
                        res.data.results.rows[i].countDown = 0                  //在rows里面添加一个属性 cuntDown来计算两个时间之间的差值
                        if(res.data.results.rows[i].orderStatus =="待支付"){
                            res.data.results.rows[i].countDown = expires - (times - res.data.results.rows[i].createTime)
                                                                //当前时间减去创建时间 得到差值  十分钟减去差值 差值小于0 订单已过期
                            if(res.data.results.rows[i].countDown < 0){
                                res.data.results.rows[i].orderStatus = "过期" //此处可以修正后端没有及时设置为已过期的问题
                            }
                        }
                    }
                    this.data=res.data.results.rows
                    if(this.interval){                  //判断定时器这个属性是否为空,存在则清除
                        clearInterval(this.interval)
                    }
                    this.interval = setInterval(() => {　　　　　　　　　　//这个interval是在data(){return{}} 中创建，初始化为null 防止重复请求到这个页面定时器重复生成
                        for ( let i = 0 ; i<this.data.length ; i++){
                            if(this.data[i].orderStatus =="待支付"){
                                this.data[i].countDown = this.data[i].countDown - 1000      //data.countDown 这个新属性上面更改，不会影响视图层
                                if(this.data[i].countDown < 0){
                                    this.data[i].orderStatus = "过期" //倒计时结束后设置过期
                                }
                            }
                        }
                    }, 1000);

　　

相应的处理函数

 Countdown(time) {
　　　　　　　　　　//将传递过来的时间戳差值转化为时分形式
                let ts = time
                let days = parseInt(ts / (1000 * 60 * 60 * 24));
                let hours = parseInt((ts % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                let minutes = parseInt((ts % (1000 * 60 * 60)) / (1000 * 60));
                let seconds = (ts % (1000 * 60)) / 1000;
                let str = `${seconds}秒`;
                if(minutes > 0){
                    str = `${minutes}分钟${seconds}秒`
                }
                return str
            },