扣丁学堂HTML5开发Vue实现点击时间获取时间段查询功能
今天扣丁学堂HTML5培训老师给大家介绍一下关于Vue如何实现点击时间获取时间段查询功能详解，希望对同学们学习有所帮助，下面我们一起来看下一下具体代码吧。
html代码（忽略）
vue.js代码点击事件
//获取时间、
//时间解析;
Time:function(now){
letyear=newDate(now).getFullYear();
letmonth=newDate(now).getMonth()+1;
letdate=newDate(now).getDate();
if(month<10)month="0"+month;
if(date<10)date="0"+date;
returnyear+"-"+month+"-"+date
},
//本周第一天；
showWeekFirstDay:function()
{
letNowdate=newDate();
letWeekFirstDay=newDate(Nowdate-(Nowdate.getDay()-1)*86400000);
letM=Number(WeekFirstDay.getMonth())+1;
if(M<10){
M="0"+M;
}
letD=WeekFirstDay.getDate();
if(D<10){
D="0"+D;
}
returnWeekFirstDay.getFullYear()+"-"+M+"-"+D;
},
//本周最后一天
showWeekLastDay:function()
{
letNowdate=newDate();
letWeekFirstDay=newDate(Nowdate-(Nowdate.getDay()-1)*86400000);
letWeekLastDay=newDate((WeekFirstDay/1000+6*86400)*1000);
letM=Number(WeekLastDay.getMonth())+1;
if(M<10){
M="0"+M;
}
letD=WeekLastDay.getDate();
if(D<10){
D="0"+D;
}
returnWeekLastDay.getFullYear()+"-"+M+"-"+D;
},
//获得某月的天数：
getMonthDays:function(myMonth){
letmonthStartDate=newDate(newDate().getFullYear(),myMonth,1);
letmonthEndDate=newDate(newDate().getFullYear(),myMonth+1,1);
letdays=(monthEndDate-monthStartDate)/(1000*60*60*24);
returndays;
},
//点击事件
query:function(way){
letself=this;
this.$refs.pag.currentPage=1;
this.page=this.$refs.pag.currentPage;
switch(way){
case'today':
this.startTime=this.maxTime;
this.endTime=this.maxTime;
break;
case'yesterday':
this.startTime=this.Time(newDate().getTime()-24*60*60*1000);
this.endTime=this.Time(newDate().getTime()-24*60*60*1000);
break;
case'weeks':
this.startTime=this.showWeekFirstDay();
this.endTime=this.maxTime;
break;
case'lastWeek':
this.startTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth(),newDate().getDate()-newDate().getDay()-6));
this.endTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth(),newDate().getDate()+(6-newDate().getDay()-6)));
break;
case'month':
this.startTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth(),1));
this.endTime=this.maxTime;
break;
case'lastMonth':
this.startTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth()-1,1));
this.endTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth()-1,this.getMonthDays(newDate().getMonth()-1)));
break;
}
this.$axios({
method:'post',
url:'/inter/user/queryMemberReport',
data:{
'account':this.account,
'baseLotteryId':this.lottersId,
'startTime':this.startTime,
'endTime':this.endTime
}
}).then(function(data){
//console.log(data)
}).catch(function(error){
console.log(error);
})
}
这样一个点击查询时间段效果就可以实现了。
以上就是关于Vue如何实现点击时间获取时间段查询功能详解的全部内容，希望对大家的学习有所帮助，也希望大家多多支持扣丁学堂。
