https://cgygd.github.io/vue2-countdown/

好吧  我觉得用在列表里 不是特别好用,存在bug。又在网上发现了新的:

效果:

<template>
  <div class="app-container">
    <div class="content">
      <div v-for="(item,index) in dataList">
        <el-card class="box-card">
          <p>{{item.id}}</p>
          <p>{{item.name}}</p>
          <p>{{item.date}}</p>
          <p>倒计时:{{item.dd}} 天 {{item.hh}}: {{item.mm}}: {{item.ss}}</p>
        </el-card>
      </div>
    </div>

  </div>
</template>
<script>
  import moment from 'moment'

  export default {
    data() {
      return {
        dataList: [{
            id: 1,
            name: '111',
            date: '2022-04-19 00:07:13'
          },
          {
            id: 2,
            name: '222',
            date: '2022-04-19 00:08:19'
          },
          {
            id: 3,
            name: '333',
            date: '2022-04-19 00:03:25'
          },
          {
            id: 4,
            name: '444',
            date: '2022-04-19 00:04:53'
          }
        ]
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        var myNewData = []
        this.dataList.map(((item, index) => {
          myNewData.push(item)
          this.$set(item, "ss", this.getTimeList())
        }))
        this.dataList = myNewData
      },
      getTimeList() {
        var _this = this;
        setInterval(function() {
          for (var key in _this.dataList) {
            var start = new Date().getTime();
            var end = Date.parse(moment(_this.dataList[key]["date"]).add(1, 'day'))
            var rightTime = end - start;
            if (rightTime > 0) {
              var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
              var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
              var mm = Math.floor((rightTime / 1000 / 60) % 60);
              var ss = Math.floor((rightTime / 1000) % 60);
              dd = dd > 9 ? dd : '0' + dd
              hh = hh > 9 ? hh : '0' + hh
              mm = mm > 9 ? mm : '0' + mm
              ss = ss > 9 ? ss : '0' + ss
              _this.dataList[key]["dd"] = dd;
              _this.dataList[key]["hh"] = hh;
              _this.dataList[key]["mm"] = mm;
              _this.dataList[key]["ss"] = ss;
            } else {
              _this.dataList[key]["dd"] = '00';
              _this.dataList[key]["hh"] = '00';
              _this.dataList[key]["mm"] = '00';
              _this.dataList[key]["ss"] = '00';
            }
          }
        }, 1000);
      },
    }
  }
</script>