快捷導(dǎo)航

vue如何通過日期篩選數(shù)據(jù)

更新時(shí)間：2022年05月31日 11:46:20 作者：邱志剛

這篇文章主要介紹了vue如何通過日期篩選數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

如何通過日期篩選數(shù)據(jù)

此片博客介紹的方法是通過請(qǐng)求后臺(tái)數(shù)據(jù)給的狀態(tài)，然后把自己選擇的時(shí)間傳過去實(shí)現(xiàn)篩選的，根據(jù)業(yè)務(wù)邏輯來參考吧！

下篇我們會(huì)說下通過vue過濾器來實(shí)現(xiàn)的方法！

業(yè)務(wù)邏輯：首先前端需要獲取其用戶選擇的日期數(shù)據(jù)，然后通過接口把日期數(shù)據(jù)傳給后端，后端接收數(shù)據(jù)會(huì)返回給前端新的數(shù)據(jù)，頁(yè)面在進(jìn)行渲染。到此功能會(huì)是實(shí)現(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">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h4>{{item.money}}</h4>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <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)前的頁(yè)面顯示第一頁(yè)。
                   this.dates = this.formatDate(this.currentDate,`yyyy${'年'}MM${'月'}`);  //將日期轉(zhuǎn)化為時(shí)間值 在我的博客主頁(yè)能找到這關(guān)于這個(gè)的博客
                   this.datesed = this.formatDate(this.currentDate,'yyyy-MM');  //將日期轉(zhuǎn)化為時(shí)間值 在我的博客主頁(yè)能找到這關(guān)于這個(gè)的博客
                   this.list = [];   // 讓當(dāng)前循環(huán)的數(shù)據(jù)為空，因?yàn)槲易龅臄?shù)據(jù)分頁(yè)是往里對(duì)堆數(shù)據(jù)的，
                   this.agplease(); //執(zhí)行請(qǐng)求數(shù)據(jù)方法
                  //  console.log(this.datesed)   //獲取時(shí)間值
              }, 
            //請(qǐng)求數(shù)據(jù)
            agplease(){
              this.axios.get('user/bill',{
                params : {
                  state : 3, //傳參數(shù)
                  page:this.page,
                  page_size:8,
                  date : this.datesed,     //后臺(tái)給的狀態(tài)等于你提交的時(shí)間數(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; // 每頁(yè)顯示條數(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);
              
                }
                 
              })
            }

上面的代碼希望對(duì)你有幫助，當(dāng)然寫法有很多根據(jù)你們自己的風(fēng)格去寫

vue簡(jiǎn)單數(shù)據(jù)篩選

給大家分享一個(gè)簡(jiǎn)單的用vue實(shí)現(xiàn)數(shù)據(jù)篩選的代碼，因?yàn)槲蚁螺d了vue.js所以我是內(nèi)聯(lián)的，沒有下載的同學(xué)可以去下載一下vue 官網(wǎ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(水果列表中變量的項(xiàng))包含文字 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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: