SOURCE

var app=new Vue({
  el:'#app',
  data:{
    timerArr:[],//存储所有定时器,便于整体清除
    isdisabled:false,
    list:[]
  },
  methods:{
      start(){//开始倒计时（真实项目中该方法通过接口从后台获取固定数量数据）
        let that=this;
        let arr=[
          	{name:'test1',time:5,id:1,status:'进行中'},
            {name:'test2',time:10,id:2,status:'进行中'},
            {name:'test3',time:15,id:3,status:'进行中'},
            {name:'test4',time:26,id:4,status:'进行中'},
        ]
        that.list=that.list.concat(arr);
        that.setCountDown()
      },
      setCountDown(startIndex){//循环添加倒计时
        var that=this;
        that.timerArr.forEach(val=>{
          clearInterval(val);
        });
        that.list.forEach((val,index)=>{
        		that.doCountDown(val.time,index);
        })
      },
      add(){
        let that=this;
        that.isdisabled=true;
        var arr=[
          {name:'add1',time:7,id:5,status:'进行中'},
          {name:'add2',time:13,id:6,status:'进行中'},
          {name:'add3',time:9,id:7,status:'进行中'},
          {name:'add4',time:15,id:8,status:'进行中'},
        ]
        that.list=that.list.concat(arr);
        that.setCountDown()
      },
      doCountDown(t,index){//该方法还可以扩展为返回年月日
          let that=this;
          that.timerArr[index]=setInterval(function(){
              if(t > 0){
                  that.list[index].time=t--;
              }else{
                  that.list[index].time=0;
                  that.list[index].status='已结束';
                  clearInterval(that.timerArr[index]);
              }
          },1000);
      }
    }
})

<div id="app">
  <h4>模拟手机端下拉加载数据时设置多个定时器</h4>
  <button @click='start'>获取数据</button>
  <button @click='add' v-if='!isdisabled'>追加一次数据</button>
  <p v-for='item in list'>
    {{item.name}}
    <span style='color:green' v-if='item.time > 0'>[{{item.status}}]</span>
    <span style='color:grey' v-else>[{{item.status}}]</span>
    --<b>{{item.time}}</b>
  </p>
</div>