vue在列表中使用倒计时

应用场景：订单列表中每个待支付订单的有效时长倒计，或者拼团的倒计时，如下

1、html仅展示主要部分，这里limit_time 的值为一个具体时长，如：86400秒，可以根据自己的实际情况进行换算。

<div v-for="(spellGroup, index) in groups" :key="index">
  <p >剩余 {{spellGroup.limit_time | limitTimeFilter}}</p> 
</div>

2、script部分，这里有个小坑，从父组件获取的infos是不能直接被更改的，所以咱们要给它重新放到一个新的容器groups里面，再来操作groups就不会有任何问题了。
另外，下面的formateTimeStamp方法为将时间转化为对象的工具函数，可以视情况调整。

import { formateTimeStamp } from '@/util/tools.js'
export default {
    props: {
      infos: {
        type: [Array, Object]
      }
    },
	data () {
	    return {
	      groups: this.infos.group_list, // 遍历到页面的数据集合
	      ticker: null
	    }
	},
	filters: {
    	// 拼团有效期的filter
    	limitTimeFilter (val) {
	      	if (val > 0) {
	            let formateLimitTimes = formateTimeStamp(val);
	            let txt = `${formateLimitTimes.hour} 时 ${formateLimitTimes.min} 分            			${formateLimitTimes.seconds} 秒`;
	            if (formateLimitTimes.day != '00') {
	              txt = `${Number(formateLimitTimes.day)*24} 时 ${formateLimitTimes.min} 分   ${formateLimitTimes.seconds} 秒`;
	            }
	          return txt;
	         } else {
	            const twtxt = `0 时 0 分 0 秒`
	            return twtxt;
	         }
	    }
	    
   },
   methods: {
   		beginTimer() { //这个计时器是每秒减去数组中指定字段的时间
	      this.ticker = setInterval(() => {
	        for (let i = 0, len = this.groups.length; i < len; i++) {
	          const item = this.groups[i];
	          if (item.limit_time > 0) {
	            this.groups[i].limit_time = this.groups[i].limit_time - 1;
	          }
	        }
	      }, 1000);
	    }
   }，
   mounted () {
   
   	  //这一段是防止进入页面出去后再进来计时器重复启动
   	  if (this.ticker) {
         clearInterval(this.ticker);
       }
      this.beginTimer();
   }
}

tools.js

// 计算出时间戳的具体数据：比如将85400转化为 n时n分n秒
export function formateTimeStamp (timeStamp) {
  var hour;
  var min;
  var seconds;

  hour = parseInt(timeStamp / (60 * 60)) // 计算整数小时数
  var afterHour = timeStamp - hour * 60 * 60 // 取得算出小时数后剩余的秒数
  min = parseInt(afterHour / 60) // 计算整数分
  seconds = parseInt(timeStamp - hour * 60 * 60 - min * 60) // 取得算出分后剩余的秒数

  if (hour < 10) {
    hour = '0' + hour
  }

  if (min < 10) {
    min = '0' + min;
  }

  if (seconds < 10) {
    seconds = '0' + seconds;
  }

  const restTime = {
    hour: hour,
    min: min,
    seconds: seconds
  }
  return restTime
}