当前位置:首页 > 电脑知识 > 正文内容

干货分享(vue中获取当前时间)vue时间戳,Vue如何实现点击时间获取时间段查询功能,Vue如何实现点击时间获取时间段查询功能,

sauo3年前 (2022-12-15)电脑知识108

Vue如何实现点击时间获取时间段查询功能废话不多说,直接上代码。

html:

<template><divclass="personalReport_time"><inputtype="date":max="this.endTime"value=""v-model="startTime"/><div></div><inputtype="date":min="startTime":max="this.maxTime"v-model="endTime"/></div><ulclass="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=newDate(now).getFullYear();let month=newDate(now).getMonth()+1;let date=newDate(now).getDate();if(month <10) month ="0"+ month;if(date <10) date ="0"+ date;return year+"-"+month+"-"+date },//本周第一天; showWeekFirstDay:function(){letNowdate=newDate();letWeekFirstDay=newDate(Nowdate-(Nowdate.getDay()-1)*86400000);letM=Number(WeekFirstDay.getMonth())+1;if(M<10){M="0"+M;}letD=WeekFirstDay.getDate();if(D<10){D="0"+D;}returnWeekFirstDay.getFullYear()+"-"+M+"-"+D;},//本周最后一天 showWeekLastDay:function(){letNowdate=newDate();letWeekFirstDay=newDate(Nowdate-(Nowdate.getDay()-1)*86400000);letWeekLastDay=newDate((WeekFirstDay/1000+6*86400)*1000);letM=Number(WeekLastDay.getMonth())+1;if(M<10){M="0"+M;}letD=WeekLastDay.getDate();if(D<10){D="0"+D;}returnWeekLastDay.getFullYear()+"-"+M+"-"+D;},//获得某月的天数: getMonthDays:function(myMonth){let monthStartDate =newDate(newDate().getFullYear(), myMonth,1);let monthEndDate =newDate(newDate().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){casetoday:this.startTime=this.maxTime;this.endTime=this.maxTime;break;caseyesterday:this.startTime=this.Time(newDate().getTime()-24*60*60*1000);this.endTime=this.Time(newDate().getTime()-24*60*60*1000);break;caseweeks:this.startTime=this.showWeekFirstDay();this.endTime=this.maxTime;break;caselastWeek:this.startTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth(),newDate().getDate()-newDate().getDay()-6));this.endTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth(),newDate().getDate()+(6-newDate().getDay()-6)));break;casemonth:this.startTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth(),1));this.endTime=this.maxTime;break;caselastMonth:this.startTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth()-1,1));this.endTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth()-1,this.getMonthDays(newDate().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);})}

这样一个点击查询时间段效果就可以实现了。希望能够帮助到大家。

(window.slotbydup = window.slotbydup || []).push({ id: "u6835052", container: "_96bek913mdb", async: true });

本文链接:http://blog.sauo.top/?id=523 感谢分享!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由冬眠先生个人博客发布,如需转载请注明出处。

本文链接:http://blog.sauo.top/?id=523

分享给朋友:

“干货分享(vue中获取当前时间)vue时间戳,Vue如何实现点击时间获取时间段查询功能,Vue如何实现点击时间获取时间段查询功能,” 的相关文章

深度揭秘(Ubuntu 防火墙设置)ubuntu防火墙配置文件,ubuntu防火墙的安装与设置,ubuntu防火墙的安装与设置,

免费领取腾讯云服务器! ubuntu系统中的防火墙使用的是iptables,而为了方便防火墙的设置ubuntu提供了一个防火墙管理工具ufw.下面这篇文章就说一说关于防火墙管理工具ufw的安装与使用方法。 ubuntu防火墙ufw的安装与设...

新鲜出炉(ubuntu系统与centos系统区别)ubuntu还是centos,centos系统与ubuntu系统的区分,centos系统与ubuntu系统的区分,

免费领取腾讯云服务器! Linux的发行版有很多,而我们经常使用的为centos与ubuntu,下面这篇博文就说说这两个系统的发源与区别。 CentOS CentOS(Community Enterprise Operati...

不看后悔(php全局变量有哪些)php全局变量和局部变量的区别,php全局变量与js全局变量的区别,php全局变量与js全局变量的区别,

免费领取腾讯云服务器! 因为经常写php与js代码,有时候使用全局变量的时候经常的混淆,这篇文章就来说说js中的全局变量与php中的全局变量的区别。 js全局变量与php全局变量的区别 php全局变量 php...

没想到(PHP重定向)php获取重定向后的地址,php实现页面重定向的方法,php实现页面重定向的方法,

免费领取腾讯云服务器! php脚本实现页面重定向有多种方法,下面列几种简单的方法,供大家来参考一下。 php实现页面重定向的方法 方法1: 使用php中的 header() 函数来实现页面的跳转,实现重定向的...

这都可以(php保存网络图片到本地)php下载图片到本地,php保存图片到本地的方法,php保存图片到本地的方法,

免费领取腾讯云服务器! 下面列几种网上收集的利用php脚本将远程图片保存至本地的方法,各位自行测试代码是否可用,另外php保存远程图片到本地并不能确保百分百的一定会拉取到远程图片的数据。 php保存远程图片到本地的方法 方法...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。