当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue实现点击时间获取时间段查询功能

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

2019年06月06日  | 移动技术网IT编程  | 我要评论

初二英语下册视频,景伯宁,365夜故事

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

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

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网