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

html代码

<template><div class="personalReport_time"> <input type="date" :max="this.endTime" value="" v-model="startTime"/> <div></div> <input type="date" :min="startTime" :max="this.maxTime" v-model="endTime"/> </div> <ul class="personalReport_date"> <li @click="query('today')">今天</li> <li @click="query('yesterday')">昨天</li> <li @click="query('weeks')">本周</li> <li @click="query('lastWeek')">上周</li> <li @click="query('month')">本月</li> <li @click="query('lastMonth')">上月</li> </ul> <div> <button @click="query" class="but">查询</button> </div> </template>

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); }) }

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

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