vue实现数据遍历、多个倒计时列表

移动端效果图：

1、HTML显示代码：

 <template>
     <div class="activeList">
         <div class="list-box" v-for="(item,index) in activeDataList">
             <div class="list-title">
                 <p>{{item.title}}</p>
                 <span>已参加人数 <i class="addpeo">{{item.nowNumber}}</i> / <i>{{item.maxNumber}}</i>人</span>
                 <button :class="item.isSignStart ? 'startBtn' : 'nostartBtn'" v-if="!item.signFinish" @click="goDetail(item.bindid,item.isActiveStart)">我要参加</button>
                 <button class="nostartBtn" v-if="item.isSigned" @click="goDetail(item.bindid,item.isActiveStart)">我已报名</button>
                 <button class="finishBtn" v-if="item.signFinish && !item.isFull">截至报名</button>
                 <button class="finishBtn" v-if="item.isSigned && item.signFinish && !item.isFull">我已报名</button>
                 <button class="finishBtn" v-if="item.isFull">已满额</button>
             </div>
             <div class="list-imgarea" @click="goDetail(item.bindid,item.isActiveStart)">
                 <div class="active-status nostart" v-if="!item.isActiveStart || !item.isSignStart">未开始</div>
                 <div class="active-status signed" v-if="item.isActiveStart || item.isSignStart">已开始</div>
                 <div class="active-status finishBtn" v-if="item.signFinish">已结束</div>
                 <div v-if="!item.signFinish && !item.isSigned" class="active-time">
                     <span v-if="!item.isSignStart">距开始还剩</span>
                     <span v-if="item.isSignStart">距截至还剩</span>
                     <i>{{item.dd}}</i> 天 <i>{{item.hh}}</i> : <i>{{item.mm}}</i> : <i>{{item.ss}}</i>
                 </div>
                 <img :src="item.imgUrl"/>
             </div>
         </div>
     </div>
 </template>

2、js逻辑部分代码：

 <script>
 import configUrl from '@/config'
 import { MessageBox } from 'mint-ui'
 export default{
     name:"ActiveList",
     data(){
         return{
             activeDataList:[],
             isInitShowTime:true
         }
     },
     mounted(){
         this.getDataList();
     },
     methods:{
         getDataList(){
             var _this = this;
             var sid = this.$route.query.sid;
             var url = "activelist.json";
             this.$ajax(url).then(function(res){
                 var myNewData = []
                 res.data.data.map(((item,index) =>{
                     myNewData.push(item)
                     _this.$set(item,"ss",_this.getTimeList())
                 }))
                 _this.activeDataList = myNewData;

             })
             .catch(function(err){
                 MessageBox('提示', '网络错误');
             })
         },
         goDetail(bindid,statu){
             this.$router.push({
                 path:'/ActiveDetail',
                 query:{  //路由传参时push和query搭配使用 ，作用时传递参数
                   sid:this.$route.query.sid,
                   bindid:bindid
                 }
             })
         },
         getTimeList(){
             var _this = this;
             setInterval(function(){
                 for (var key in _this.activeDataList) {
                     if(!_this.activeDataList[key]["isSignStart"]){
                         var end = new Date(_this.activeDataList[key]["startTime"].replace(/-/g,'/')).getTime();
                     }
                     else{
                         var end = new Date(_this.activeDataList[key]["endTime"].replace(/-/g,'/')).getTime();
                     }
                     var start = new Date().getTime();
                     var rightTime = end - start;
                     if (rightTime > 0) {
                         var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
                         var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
                         var mm = Math.floor((rightTime / 1000 / 60) % 60);
                         var ss = Math.floor((rightTime / 1000) % 60);
                         dd = dd > 9 ? dd : '0' + dd
                         hh = hh > 9 ? hh : '0' + hh
                         mm = mm > 9 ? mm : '0' + mm
                         ss = ss > 9 ? ss : '0' + ss
                         _this.activeDataList[key]["dd"] = dd;
                         _this.activeDataList[key]["hh"] = hh;
                         _this.activeDataList[key]["mm"] = mm;
                         _this.activeDataList[key]["ss"] = ss;
                     }
                     else{
                         _this.activeDataList[key]["dd"] = 0;
                         _this.activeDataList[key]["hh"] = 0;
                         _this.activeDataList[key]["mm"] = 0;
                         _this.activeDataList[key]["ss"] = 0;                                         

                         if(_this.activeDataList[key]["isSignStart"] == false){
                             _this.activeDataList[key]["isSignStart"] = true;
                         }
                         else{
                             _this.activeDataList[key]["signFinish"] = true;
                         }    

                     }
                 }
             },1000);

         }
     }

 }
 </script>