vue 單頁面循環多個倒計時

html

 <div class="row" v-for="(time, index) in timeList">
      <div class="but" @click="start(time, index)">開始</div>
      <div>{{time.count}}</div>
    </div>

js

data () {
      return {
        timeList: [{id: '0', count: 60, whetherStart: false}, {id: '1', count: 60, whetherStart: false}, {id: '2', count: 60, whetherStart: false}]
      };
    },
    methods: {
      start (time, index) {
        if (!time.whetherStart) {
         // 防止重複點擊
          time.whetherStart = true;
          this.reduceCount(index);
        }
      },
      reduceCount (index) {
        let _index = index;
        let time = setInterval(() => {
          if (this.timeList[_index].count > 0) {
            this.timeList[_index].count--;
          } else {
            this.timeList[_index].count = 60;
            this.timeList[_index].whetherStart = false;
          }
          if (this.timeList.filter(item => item.count !== 60).length === 0) clearInterval(time);
        }, 1000);
      }
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章