Vue實(shí)現(xiàn)點(diǎn)擊時(shí)間獲取時(shí)間段查詢功能
本文實(shí)例為大家分享了vue按時(shí)間段查詢的案例,效果圖如下
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代碼 點(diǎn)擊事件
//獲取時(shí)間、 //時(shí)間解析; 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; }, //獲得某月的天數(shù): 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; }, //點(diǎn)擊事件 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); }) }
這樣一個(gè)點(diǎn)擊查詢時(shí)間段效果就可以實(shí)現(xiàn)了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Element-UI表格嵌入popover遇到的問(wèn)題及解決方案
在表格中我們通常需要在每一行的一些單元格中顯示popover,這篇文章主要給大家介紹了關(guān)于Element-UI表格嵌入popover遇到的問(wèn)題及解決方案,需要的朋友可以參考下2023-11-11Vue3?路由頁(yè)面切換動(dòng)畫(huà)?animate.css效果
這篇文章主要介紹了Vue3路由頁(yè)面切換動(dòng)畫(huà)animate.css效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
這篇文章主要為大家詳細(xì)介紹了vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05使用websocket和Vue2中的props實(shí)時(shí)更新數(shù)據(jù)方式
這篇文章主要介紹了使用websocket和Vue2中的props實(shí)時(shí)更新數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08基于Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁(yè)功能
Element UI 是一套采用 Vue 2.0 作為基礎(chǔ)框架實(shí)現(xiàn)的組件庫(kù),它面向企業(yè)級(jí)的后臺(tái)應(yīng)用,能夠幫助你快速地搭建網(wǎng)站,極大地減少研發(fā)的人力與時(shí)間成本。這篇文章主要介紹了Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁(yè)功能,需要的朋友可以參考下2017-10-10vue-cli2與vue-cli3在一臺(tái)電腦共存的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-cli2與vue-cli3在一臺(tái)電腦共存的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09詳解Vue 數(shù)據(jù)更新了但頁(yè)面沒(méi)有更新的 7 種情況匯總及延伸總結(jié)
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁(yè)面沒(méi)有更新的 7 種情況匯總及延伸總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序
這篇文章主要介紹了mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序的相關(guān)資料及mpvue開(kāi)發(fā)流程,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼
這篇文章主要介紹了Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05