Vue实现点击时间获取时间段查询功能

前端之家收集整理的这篇文章主要介绍了Vue实现点击时间获取时间段查询功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了vue按时间段查询的案例,效果图如下

这里写图片描述

HTML代码

vue.js代码 点击事件

获取时间、 //时间解析; Time:function(now) { let year=new Date(now).getFullYear(); let month=new Date(now).getMonth()+1; let date=new Date(now).getDate(); if (month < 10) month = "0" + month; if (date < 10) date = "0" + date; return year+"-"+month+"-"+date },//本周第一天; showWeekFirstDay:function() { let Nowdate=new Date(); let WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000); let M=Number(WeekFirstDay.getMonth())+1; if(M<10){ M="0"+M; } let D=WeekFirstDay.getDate(); if(D<10){ D="0"+D; } return WeekFirstDay.getFullYear()+"-"+M+"-"+D; },//本周最后一天 showWeekLastDay:function () { let Nowdate=new Date(); let WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000); let WeekLastDay=new Date((WeekFirstDay/1000+6*86400)*1000); let M=Number(WeekLastDay.getMonth())+1; if(M<10){ M="0"+M; } let D=WeekLastDay.getDate(); if(D<10){ D="0"+D; } return WeekLastDay.getFullYear()+"-"+M+"-"+D; },//获得某月的天数: getMonthDays:function (myMonth){ let monthStartDate = new Date(new Date().getFullYear(),myMonth,1); let monthEndDate = new Date(new Date().getFullYear(),myMonth + 1,1); let days = (monthEndDate - monthStartDate)/(1000 * 60 * 60 * 24); return days; },//点击事件 query:function (way) { let self=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(new Date().getTime()-24*60*60*1000); this.endTime=this.Time(new Date().getTime()-24*60*60*1000); break; case 'weeks': this.startTime=this.showWeekFirstDay(); this.endTime=this.maxTime; break; case 'lastWeek': this.startTime=this.Time(new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()-new Date().getDay()-6)); this.endTime=this.Time(new Date(new Date().getFullYear(),new Date().getDate()+(6-new Date().getDay()-6))); break; case 'month': this.startTime=this.Time(new Date(new Date().getFullYear(),1)); this.endTime=this.maxTime; break; case 'lastMonth': this.startTime=this.Time(new Date(new Date().getFullYear(),new Date().getMonth()-1,1)); this.endTime=this.Time(new Date(new Date().getFullYear(),this.getMonthDays(new Date().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); }) }

这样一个点击查询时间段效果就可以实现了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/32588.html

猜你在找的Vue相关文章