vue中循环列表添加倒计时

作为小白，这也是为了记录自己的学习经历。写的不好请见谅！
首先，先介绍下需求，下面有这样一张图，商品列表展示，然后左上角显示倒计时。这里的倒计时有两种情况：

1：未到抢购时间，这里就是用 开始时间 - 当前时间 计算倒计时开始
2：在抢购时间范围内，这里是用 结束时间 - 当前时间 计算倒计时结束
3：抢购时间已过，这里就不用倒计时，此时后台直接删除数据。
ps：（这个业务不是我们规定的，当时我也是傻傻分不清楚，为什么不加 什么时间后开始，什么时间后结束呢？别问我，这是产品的要求，只显示倒计时）

为了更好理解代码，附上代码解析图！

样式内容图------------->

代码附上--------->（ps：数据格式会在后面附上）

<div class="home-list" v-if="allgoodsList.length != 0" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
        <div class="list-mar-bot" v-for="(item, i) in allgoodsList" :key="i">
          <div class="list-li">
            <div class="left-img">
              <img :src="item.goodsImages[0].imageUrl" alt="">
            </div>
            <div class="right-box">
              <div class="title">{{item.title}}</div>
              <p class="cont">{{item.goodsDescribe}}</p>
              <div class="price-box">
                <span v-if="item.integralPrice!=0" class="price">&yen;{{item.price}}+小蜜蜂{{item.integralPrice}}</span>
                <span v-if="item.integralPrice==0" class="price">&yen;{{item.price}}</span>
                <span class="many">已购人数{{item.salesVolume}}人</span>
              </div>
            </div>
            <div class="list-time" v-if="nowdata >= alllistcopy[i].startTime.time && nowdata < alllistcopy[i].endTime.time">{{time(item.endTime.time)}}</div>
            <div class="list-time" v-if="nowdata < alllistcopy[i].startTime.time">{{time(item.startTime.time)}}</div>
          </div>
          <div class="nowrob" v-if="nowdata >= alllistcopy[i].startTime.time && nowdata < alllistcopy[i].endTime.time"">马上抢购(剩余数量：{{item.stocks}})</div>
          <div class="nowrob" v-if="nowdata < alllistcopy[i].startTime.time">马上抢购(剩余数量：{{item.stocks}})</div>
        </div>
      <p class="bottom-more" v-if="loading">加载中...</p>
      <p class="bottom-more" v-if="noMore">没有更多了</p>
    </div>

css样式----------->（ps：我们用的是 px2rem，类似于 rem）

```css
.home-list {
          margin-top: px2rem(20);
          min-height: px2rem(500);
          max-height: px2rem(600);
          overflow: auto;
          background-color: rgba(224, 224, 224,.4);
          .bottom-more {
              text-align: center;
              padding-bottom: px2rem(40);
          }
          .serheight {
              height: px2rem(600);
          }
          .list-li {
              display: flex;
              height: px2rem(230);
              padding: px2rem(10) 0 px2rem(10) 0;
              overflow: hidden;
              align-items: center;
              position: relative;
              .list-time {
                  position: absolute;
                //   z-index: 2;
                  left: 0;
                  top: px2rem(10);
                  width: px2rem(140);
                  height: px2rem(60);
                  text-align: center;
                  line-height: px2rem(60);
                  font-size: px2rem(26);
                  background-color: #6601a1;
                  color: #fff;
              }
              .left-img {
                  width: px2rem(210);
                  height: px2rem(210);
                  border-radius: px2rem(10);
                  overflow: hidden;
                  img {
                      width: 100%;
                      height: 100%;
                  }
              }
              .right-box {
                  margin-left: px2rem(30);
                  width: px2rem(451);
                  .title {
                      font-size: px2rem(30);
                      color: #444444;
                      font-weight: bold;
                  }
                  .cont {
                      margin-top: px2rem(17);
                      font-size: px2rem(24);
                      color: #999999;
                      overflow:hidden;
                    text-overflow:ellipsis;
                    display:-webkit-box;
                    -webkit-line-clamp:3;
                    -webkit-box-orient:vertical;
                  }
                  .price-box {
                      display: flex;
                      justify-content: space-between;
                      margin-top: px2rem(5);
                      .price {
                          color: #F85050;
                          font-size: px2rem(34);
                      }
                      .many {
                          font-size: px2rem(22);
                          color: #CDCDCD;
                          padding-top: px2rem(8);
                      }
                  }
              }
          }
          .nowrob {
              border-top: 1px solid rgb(233, 233,233);
              padding: px2rem(25);
              margin-top: px2rem(20);
              text-align: center;
              color: #6601a1;
          }
      }

数据定义---------->

data () {
    return {
      nowdata: new Date().getTime(),
      goodsList: [], // 商品列表1
      allgoodsList: [],1
      listcopy : '',
      alllistcopy : [],
      starttime: '', // 开始时间
      endtime: '', // 结束时间
      currentTime: '', // 当前时间
      timesetting: '', // 设置定时器
      settingtime: '',
      iconlist: [], // 倒计时数据
      tickertwo: null,// 这款里是two是因为前面我也有倒计时
      d: "",
      h: "",
      m: "",
      s: "",
      setint: null
    }
  },

js部分------------->（ps：）

beginTimer() { //这个计时器是每秒减去数组中指定字段的时间
    let vm = this
      this.tickertwo = setInterval(() => {
      //数据循环，因为要每一列数据都要倒计时，所以要对每一列的数据进行处理
        for (let i = 0, len = this.iconlist.length; i < len; i++) {
          const item = this.iconlist[i];
          //这里是，当前时间 > 开始时间 && 当前时间 < 结束时间 的 倒计时
          if (vm.nowdata > vm.alllistcopy[i].startTime.time && vm.nowdata < vm.alllistcopy[i].endTime.time) {
          //这里还是对数据的处理，因为是赋值的原因，所以对item操作就是对原来数据的操作，这里就对应之前为什么要用深拷贝把原本数据拷贝一份进行操作的原因
            item.endTime.time = item.endTime.time - 1000;
            //下方是判断 当前时间 < 开始时间  倒计时计算
          }else if (vm.nowdata < vm.alllistcopy[i].startTime.time) {
            item.startTime.time = item.startTime.time - 1000;
          }
        }
      }, 1000);
    },

time(time) { //这个函数是把计算出来的倒计时进行转换，在html里面显示倒计时那里直接用的
      if (time >= 0) {
        let h = Math.floor(time / 1000 / 60 / 60)
        let m = Math.floor(time / 1000 / 60 % 60)
        let s = Math.floor(time / 1000 % 60)
        h = h < 10 ? '0' + h : h
        m = m < 10 ? '0' + m : m
        s = s < 10 ? '0' + s : s
         return h + ':' + m + ':' + s
      }
      if (time < 0) {
        this.getgoodsList()
        clearInterval(this.tickertwo)
        return
      }
    },

//获取购物列表
    getgoodsList () {
      let vm = this
      vm.goodsList = []
      let parmas = {
        //这里的参数就不显示了
      }
      let url = vm.$utils.queryParams(vm.$mdata.mdGet(parmas))
      vm.$http.get(`request.app${url}`)
        .then(res => {
          if (res.data[39] === '00') {
            vm.goodsList = JSON.parse(res.data[40])
            for (var i in vm.goodsList) {
              // console.log()
              vm.allgoodsList.push(vm.goodsList[i])
            }
            // 利用深拷贝保存数据
            vm.listcopy = JSON.stringify(vm.allgoodsList)
            vm.alllistcopy = JSON.parse(vm.listcopy)
            //倒计时
            for (let i = 0, len = this.allgoodsList.length; i < len; i++) {
              const item = this.allgoodsList[i];
              // 当前时间小于开始时间，显示当前到开始的倒计时
              if (vm.nowdata < vm.alllistcopy[i].startTime.time) {
                // 修改开始时间
                item.startTime.time = new Date(item.startTime.time).getTime() - new Date().getTime()
              }else if (vm.nowdata >= vm.alllistcopy[i].startTime.time && vm.nowdata < vm.alllistcopy[i].endTime.time) {
                // 如果当前时间大于开始时间，小于结束时间，显示当前到结束的倒计时
                item.endTime.time = new Date(item.endTime.time).getTime() - new Date().getTime()
              }
            }
            this.iconlist = this.allgoodsList; //将改变后的数组赋值给自定义的数组 然后调用计时器 每秒减去指定字段的时间戳 -1000毫秒
            if (this.tickertwo) { //这一段是防止进入页面出去后再进来计时器重复启动
              clearInterval(this.tickertwo);
            }
            //进行数据的计算 -1000 毫秒
            this.beginTimer() //启动计时器减指定字段的时间
          }
        })
        .catch(err => {
          console.log(err)
        })
    }

以上就是我写的倒计时，针对列表中不同时间进行倒计时，其实就是把原数据中的开始时间和结束时间，与当前时间进行计算，算出来的值重新赋值给那个字段，那么这个字段就是倒计时用的时间了，这样再用 v-for 循环列表的时候，做好判断，把对应的时间放上去，用 tiem() 方法进行时间转换，就做到列表中要求不同字段做倒计时了。

最后别忘了离开页面的时候清除倒计时哦！代码附上！

destroyed() {
    if (this.tickertwo) {
      clearInterval(this.tickertwo)
    }
  },

下方是数据格式！

[
    {
        "address":"北京",
        "bonusIntegral":0,
        "createTime":{
            "date":21,
            "day":2,
            "hours":14,
            "minutes":8,
            "month":3,
            "nanos":0,
            "seconds":25,
            "time":1587449305000,
            "timezoneOffset":-480,
            "year":120
        },
        "endTime":{
            "date":22,
            "day":3,
            "hours":23,
            "minutes":59,
            "month":3,
            "nanos":0,
            "seconds":59,
            "time":1587571199000,
            "timezoneOffset":-480,
            "year":120
        },
        "expressFee":"0",
        "goodsDescribe":"原生木浆抽纸，超韧品质，加倍柔韧，柔软舒适，亲肤不刺激，湿水不易破，家用纸巾，健康生活，从维达开始，原生木浆，安心用纸",
        "goodsImages":[
            {
                "createTime":null,
                "goodsId":"",
                "id":"",
                "imageUrl":"这是图片",
                "type":""
            }
        ],
        "id":"这里是ID",
        "integralPrice":10,
        "name":"原木纸巾6包",
        "price":0,
        "salesVolume":"25",
        "startTime":{
            "date":22,
            "day":3,
            "hours":12,
            "minutes":0,
            "month":3,
            "nanos":0,
            "seconds":0,
            "time":1587528000000,
            "timezoneOffset":-480,
            "year":120
        },
        "status":"1",
        "stocks":75,
        "title":"原木纸巾",
        "type":"10B",
        "updateTime":{
            "date":21,
            "day":2,
            "hours":14,
            "minutes":8,
            "month":3,
            "nanos":0,
            "seconds":48,
            "time":1587449328000,
            "timezoneOffset":-480,
            "year":120
        }
    }
]

如果想要多组数据，自行复制，然后改了 startTime 和 createTime 和 endTime 就可以啦！

本人是前端菜鸟，如果有写的不好的地方可以反馈，然后我会改进的，另外就是我在用这个倒计时的时候也是借鉴别人的博客进行开发的，因为自己要学习，所以自己总结出这些东西，同时我也附上我借鉴的博客的地址！https://blog.csdn.net/weixin_42790916/article/details/84337819