溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下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">
<h5>{{item.money}}</h5>
<label>提現成功</label>
</div>
</div>vant日期組件
<van-popup v-model="show" position="bottom" > <van-datetime-picker v-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);
}
})
}上面的代碼希望對你有幫助，當然寫法有很多根據你們自己的風格去寫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="../vue.js"></script>
<div id="app">
<input type="text" v-model="keyword"/>
<div class="box" v-for="item in flist" :key="item">
{{item}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
keyword:"",
list:["草莓","菠蘿","杏","李子","西瓜","木瓜","哈密瓜","山竹","櫻桃","香蕉","芒果"]
},
computed:{
flist(){
// 如果item(水果列表中變量的項)包含文字 this.keyword(搜索關鍵字)
// a.includes(b)如果a包含b就返回true
// 返回true當前水果·就保留
return this.list.filter(item=>item.includes(this.keyword))
}
}
})
</script>
</body>
</html>以上就是“vue怎么通過日期篩選數據”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
