vue多个倒计时怎么弄

Question

    getOpenTime(Pinyin,Id) {                   
      this.$post("地址", { token: this.token, gameId: Id }).then(res => {
        this.OpenTime[Pinyin] = res.info
         this.setIntervalForTime(Pinyin)
      });
    },
    

OpenTime现在是从这个接口地址接受了一组数字
600，500，400，300，200
五组秒位的倒计时

//倒计时？？
setIntervalForTime(Pinyin) {
    
}

<ul>
            <li v-for="(item, index) in collectionList" :key="index">
              <router-link :to="{name:'/games',params:{gameId:item.Id}}" >
                <img :src="item.url">
                <div class="count_down">
                  <h2>{{item.Name}}</h2>
                  <div class="deadline-number">
                    截止时间:
           {{endOpenTime[item.Pinyin].hour1}}{{endOpenTime[item.Pinyin].hour2}}
           :
           {{endOpenTime[item.Pinyin].minute1}}{{endOpenTime[item.Pinyin].minute2}}
           :
           {{endOpenTime[item.Pinyin].second1}}{{endOpenTime[item.Pinyin].second2}}                  
                  </div>
                </div>
              </router-link>
            </li>
          </ul>

多个倒计时要怎么搞？

Answer 1

看你这么用心的提问了，把你的res.info的数据方便放出来吗，不知道数据结构，从你给的几个片段图片代码中根本不知道你要实现什么样的倒计时？
那几个数字是600秒倒计时 500秒倒计时？还是什么？

Answer 2

虽然没看懂你的描述，但是看你代码感觉你的思路应该是在v-for里面循环出的倒计时效果。有2种方法解决，1是用filter，2是将li单独封装成组件，直接v-for循环组件