今天小编给大家分享一下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); } }) }上面的代码希望对你有帮助，当然写法有很多根据你们自己的风格去写
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>以上就是“vue怎么通过日期筛选数据”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
