vue如何通過日期篩選數據

Posted on by

如何通過日期篩選數據

此片博客介紹的方法是通過請求後臺數據給的狀態，然後把自己選擇的時間傳過去實現篩選的，根據業務邏輯來參考吧！

下篇我們會說下通過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-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);
              
                }
                 
              })
            }

上面的代碼希望對你有幫助，當然寫法有很多根據你們自己的風格去寫

vue簡單數據篩選

給大傢分享一個簡單的用vue實現數據篩選的代碼，因為我下載瞭vue.js所以我是內聯的，沒有下載的同學可以去下載一下vue 官網

<!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>

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：