vue实现列表倒计时

想要实现列表倒计时，可以使用Vue框架中的定时器方法和计算属性来实现。具体实现的过程如下：

步骤一：在App.vue文件中创建数据

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}：{{ item.countdown }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品一', expire: 1639240800000 },
        { name: '商品二', expire: 1639327200000 },
        { name: '商品三', expire: 1639413600000 },
      ],
    };
  },
};
</script>

步骤二：在计算属性中计算倒计时剩余时间

下一步，我们需要在计算属性中计算倒计时剩余时间。我们可以使用Vue提供的计算属性computed来进行计算，计算属性的值会在响应式依赖发生改变时自动重新计算。

通过计算商品的到期时间和当前时间的时间差，来计算出商品的倒计时。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}：{{ countdown(item) }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品一', expire: 1639240800000 },
        { name: '商品二', expire: 1639327200000 },
        { name: '商品三', expire: 1639413600000 },
      ],
    };
  },
  computed: {
    countdown(item) {
      const now = new Date();
      const expire = new Date(item.expire);
      const seconds = Math.floor((expire.getTime() - now.getTime()) / 1000);
      const minutes = Math.floor(seconds / 60);
      const hours = Math.floor(minutes / 60);
      const days = Math.floor(hours / 24);
      const countdownString = `${days}天${hours % 24}小时${minutes % 60}分钟${seconds % 60}秒`;
      return countdownString;
    },
  },
};
</script>

在这个例子中，我们为计算属性countdown传入了一个参数item，这个参数对应了当前正在遍历的商品对象。在计算属性的计算过程中，我们获取了商品到期时间和当前时间，计算出了剩余的时间，并返回了一个包含天、时、分、秒的字符串。

示例一：显示固定格式的倒计时

有时候我们需要显示固定格式的倒计时，比如只显示时分秒，我们可以在计算属性中指定固定格式。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}：{{ countdown(item, 'hh:mm:ss') }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品一', expire: 1639240800000 },
        { name: '商品二', expire: 1639327200000 },
        { name: '商品三', expire: 1639413600000 },
      ],
    };
  },
  computed: {
    countdown(item) {
      // ...
      const countdownString = `${hours.toString().padStart(2, '0')}:${minutes
        .toString()
        .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      return countdownString;
    },
  },
};
</script>

在这个示例中，我们在countdown函数中新增了一个参数format，用来指定倒计时的显示格式。我们通过padStart方法给小时、分钟、秒数补0，保证了他们的长度为2，防止显示出错。

示例二：在定时器中更新倒计时

默认情况下，计算属性在每一次读取时都会重新计算一次。但是在列表中，如果有多个倒计时一起运行时，计算属性的计算会显得非常消耗时间。

更好的方法是将计时器存储在数据中，然后在定时器中更新剩余时间，同时也更新计时器状态。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}：{{ item.countdown }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品一', expire: 1639240800000, countdown: '' },
        { name: '商品二', expire: 1639327200000, countdown: '' },
        { name: '商品三', expire: 1639413600000, countdown: '' },
      ],
    };
  },
  created() {
    setInterval(() => {
      this.updateCountdown();
    }, 1000);
  },
  methods: {
    updateCountdown() {
      const now = new Date();
      this.items = this.items.map(item => {
        const expire = new Date(item.expire);
        const seconds = Math.floor((expire.getTime() - now.getTime()) / 1000);
        const minutes = Math.floor(seconds / 60);
        const hours = Math.floor(minutes / 60);
        const days = Math.floor(hours / 24);
        const countdownString = `${days}天${hours % 24}小时${minutes % 60}分钟${seconds % 60}秒`;
        item.countdown = countdownString;
        return item;
      });
    },
  },
};
</script>

在这个示例中，我们在数据中新增了一个countdown字段，用来存储倒计时。在created生命周期钩子函数中，我们使用setInterval定时器定时每秒钟调用一次updateCountdown方法，这个方法会使用当前时间和到期时间计算出剩余时间，并更新商品的countdown字段。