今天小编给大家分享一下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怎么通过日期筛选数据”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
