溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下vue怎么通過日期篩選數(shù)據(jù)的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
業(yè)務(wù)邏輯：首先前端需要獲取其用戶選擇的日期數(shù)據(jù)，然后通過接口把日期數(shù)據(jù)傳給后端，后端接收數(shù)據(jù)會返回給前端新的數(shù)據(jù)，頁面在進(jìn)行渲染。到此功能會是實現(xiàn)了
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>余額提現(xiàn)-到{{item.from_to}}</p>
<label>{{item.created_at}}</label>
</div>
<div class="ag_money">
<h5>{{item.money}}</h5>
<label>提現(xiàn)成功</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; //讓當(dāng)前的頁面顯示第一頁。
this.dates = this.formatDate(this.currentDate,`yyyy${'年'}MM${'月'}`); //將日期轉(zhuǎn)化為時間值 在我的博客主頁能找到這關(guān)于這個的博客
this.datesed = this.formatDate(this.currentDate,'yyyy-MM'); //將日期轉(zhuǎn)化為時間值 在我的博客主頁能找到這關(guān)于這個的博客
this.list = []; // 讓當(dāng)前循環(huán)的數(shù)據(jù)為空，因為我做的數(shù)據(jù)分頁是往里對堆數(shù)據(jù)的，
this.agplease(); //執(zhí)行請求數(shù)據(jù)方法
// console.log(this.datesed) //獲取時間值
},
//請求數(shù)據(jù)
agplease(){
this.axios.get('user/bill',{
params : {
state : 3, //傳參數(shù)
page:this.page,
page_size:8,
date : this.datesed, //后臺給的狀態(tài)等于你提交的時間數(shù)據(jù)。這樣就可以了，
}
}).then(res => {
// 下面嗎是我自己處理數(shù)據(jù)的方法，
if(res.data.code === 200){
let aglist = res.data.data; // 總數(shù)據(jù)
let arr = aglist.list; // 數(shù)據(jù)·列表作為循環(huán)
let page_size =this.aglist.page_size; // 每頁顯示條數(shù)
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;
// 加載狀態(tài)結(jié)束
this.loading = false;
if(this.lastpage <= this.page){
this.finished = true;
}
this.page++;
// console.log(this.list);
}
})
}上面的代碼希望對你有幫助，當(dāng)然寫法有很多根據(jù)你們自己的風(fēng)格去寫
<!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(搜索關(guān)鍵字)
// a.includes(b)如果a包含b就返回true
// 返回true當(dāng)前水果·就保留
return this.list.filter(item=>item.includes(this.keyword))
}
}
})
</script>
</body>
</html>以上就是“vue怎么通過日期篩選數(shù)據(jù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼