这次给大家带来如何使用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().getMonth(), new Date().getDate()+(6-new Date().getDay()-6))); break; case 'month': this.startTime=this.Time(new Date(new Date().getFullYear(), new Date().getMonth(),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(),new Date().getMonth()-1,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); }) }
登录后复制
这样一个点击查询时间段效果就可以实现了。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
如何使用vue弹窗消息组件
怎样进行vue弹窗组件使用
立即学习“前端免费学习笔记（深入）”；
以上就是如何使用Vue实现点击时间获取时间段查询的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2751548.html
