此片博客介紹的方法是通過請求后臺數據給的狀態，然后把自己選擇的時間傳過去實現篩選的，根據業務邏輯來參考吧！
下篇我們會說下通過vue過濾器來實現的方法！
業務邏輯：首先前端需要獲取其用戶選擇的日期數據，然后通過接口把日期數據傳給后端，后端接收數據會返回給前端新的數據，頁面在進行渲染，。到此功能會是實現了，

html部分·

<div class="ag_listmain clearfix"> <div class="ag_yearlist" v-for="(item,key) in list" :key="key" @click="agrouter(item.id)"><div class="agtitle"><p>余額提現-到{{item.from_to}}</p><label>{{item.created_at}}</label></div><div class="ag_money"><h4>{{item.money}}</h4><label>提現成功</label></div></div>

vant日期組件

<van-popupv-model="show"position="bottom"><van-datetime-pickerv-model="currentDate"type="year-month":min-date="minDate":formatter="formatter"@confirm="confirm()"@cancel='cancel()' /></van-popup>

js 部分·

return{list:[] ，datesed:"", }// 選擇事件后確定按鈕方法confirm(){this.show=false;this.page = 1; //讓當前的頁面顯示第一頁。this.dates = this.formatDate(this.currentDate,`yyyy${'年'}MM${'月'}`); //將日期轉化為時間值 在我的博客主頁能找到這關于這個的博客this.datesed = this.formatDate(this.currentDate,'yyyy-MM'); //將日期轉化為時間值 在我的博客主頁能找到這關于這個的博客this.list = []; // 讓當前循環的數據為空，因為我做的數據分頁是往里對堆數據的，this.agplease(); //執行請求數據方法// console.log(this.datesed) //獲取時間值}, //請求數據agplease(){this.axios.get('user/bill',{params : {state : 3, //傳參數page:this.page,page_size:8,date : this.datesed, //后臺給的狀態等于你提交的時間數據。這樣就可以了，}}).then(res => {// 下面嗎是我自己處理數據的方法，if(res.data.code === 200){let aglist = res.data.data; // 總數據let arr = aglist.list; // 數據·列表作為循環let page_size =this.aglist.page_size; // 每頁顯示條數 for(let i=0; i<arr.length; i++){// console.log(this.list)this.list.push(arr[i]); }console.log(this.list);this.lastpage =aglist.total_page;// 加載狀態結束this.loading = false;if(this.lastpage <= this.page){this.finished = true;} this.page++; // console.log(this.list);}})}

以上的代碼希望對你有幫助，當然寫法有很多根據你們自己的風格去寫， 喜歡的點個贊，

總結

以上是生活随笔為你收集整理的vue 通过日期筛选数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。