vue实现同时设置多个倒计时

要实现同时设置多个倒计时，可以使用Vue框架提供的计时器插件Vue Countdown来完成。Vue Countdown是一个Vue的计时器组件，可以轻松地对指定时间进行倒计时，并在倒计时过程中提供相关的辅助功能。下面是实现的步骤：

1. 安装Vue Countdown插件

可以使用npm安装Vue Countdown：

npm install vue-countdown --save

1. 引入Vue Countdown插件

在Vue组件中引入Vue Countdown插件：

import countdown from 'vue-countdown'

或者在Vue实例的main.js中全局引入Vue Countdown插件：

Vue.use(countdown)

1. 在组件中使用Vue Countdown

在组件中使用Vue Countdown，并通过props属性传递所要倒计时的时间：

<countdown :time="60000" @finish="onFinish"></countdown>

...

methods: {
  onFinish() {
    console.log('倒计时结束')
  }
}

1. 同时设置多个倒计时

可以使用v-for循环遍历一个数组，每个元素都对应一个倒计时组件。同时可以通过组件之间的props传值进行通信。

<template>
  <div>
    <div v-for="(item, index) in countdownList" :key="index">
      <countdown :time="item.time" :completed.sync="item.complete"></countdown>
    </div>
  </div>
</template>

<script>
import countdown from 'vue-countdown'

export default {
  components: {
    countdown
  },
  data() {
    return {
      countdownList: [
        { time: 30000, complete: false },
        { time: 60000, complete: false },
        { time: 90000, complete: false }
      ]
    }
  }
}
</script>

在上述示例中，倒计时组件通过props传递了一个completed属性，表示倒计时是否完成。通过.sync修饰符，可以在父级组件中进行双向数据绑定，以便在倒计时完成之后更新倒计时列表中对应项的状态。

另外，通过使用计算属性对倒计时列表进行过滤，可以实现只显示未完成的倒计时。例如：

<template>
  <div>
    <div v-for="(item, index) in filteredCountdownList" :key="index">
      <countdown :time="item.time" :completed.sync="item.complete"></countdown>
    </div>
  </div>
</template>

<script>
import countdown from 'vue-countdown'

export default {
  components: {
    countdown
  },
  data() {
    return {
      countdownList: [
        { time: 30000, complete: false },
        { time: 60000, complete: false },
        { time: 90000, complete: false }
      ]
    }
  },
  computed: {
    filteredCountdownList() {
      return this.countdownList.filter(item => !item.complete)
    }
  }
}
</script>

在上述示例中，计算属性filteredCountdownList过滤出未完成的倒计时列表。在渲染倒计时组件时，只渲染未完成的倒计时项，并通过props传值对倒计时进行通信。