vue 订单列表 多个倒计时

js

methods: {
　　// 获取列表数据
　　getList() {
　　　　.
　　　　.
　　　　.
　　　　// 判断数据是否含有倒计时
　　　　this.orderData.forEach((item, index) => {
　　　　　　// 有倒计时
　　　　　　if (item.type == 1) {
　　　　　　　　this.orderData[index].timer = setInterval(() => {
　　　　　　　　this.Cuntdow(item.time, index)}, 1000)
　　　　　　}
　　　　})
　　　　.
　　　　.
　　　　.
　　},
　　// 倒计时
    CountDown(time, index) {
      if (time > 0) {
        this.orderData[index].time--
      } else {
        clearInterval(this.order[index].timer)
　　　　  // 更新订单列表
         // update(OrderId)
      }
    },
}

 html

<template>
    <div>
　　　　<ul>
　　　　　　<li v-for="(item, index) in orderData" :key="index">
　　　　　　　　<span v-if="item.type == 1 && item.time > 0">
　　　　　　　　　　{{ item.time | formatStr }}
　　　　　　　　</span>
　　　　　　</li>
　　　　</ul></div>
</template>

 js(filter 过滤器格式化时间)

注:安装插件 moment 

import moment from 'moment'
.
.
.
filters: {
    // 格式化时间
    formatStr(Val) {
      let time = moment.duration(Val, 'seconds')
      let DD = time.days() > 0 ? time.days() + '天' : ''
      let HH = `${time.hours() > 9 ? time.hours() : '0' + time.hours()}时`
      let mm = `${time.minutes() > 9 ? time.minutes() : '0' + time.minutes()}分`
      let ss = `${time.seconds() > 9 ? time.seconds() : '0' + time.seconds()}秒`
      return '剩余' + DD + HH + mm + ss
    },
  },
.
.
.