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


            本文实例为大家分享了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);

   })

  }



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

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