vue如何通过日期筛选数据
更新时间：2022年05月31日 11:46:20 作者：邱志刚
这篇文章主要介绍了vue如何通过日期筛选数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
如何通过日期筛选数据
此片博客介绍的方法是通过请求后台数据给的状态，然后把自己选择的时间传过去实现筛选的，根据业务逻辑来参考吧！
下篇我们会说下通过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>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue组件详解之使用slot分发内容及Vue组件中slot的用法,需要的朋友可以参考下2018-04-04
这篇文章主要为大家介绍了Vue技巧Element Table二次封装实战示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
Vue的响应式数据机制是其核心特性之一,它能够自动追踪数据的变化,并实时更新相关的视图,然而,Vue2中的响应式数据机制并非完美无缺,本文将探讨Vue2响应式原理及其存在的缺陷2023-08-08
这篇文章主要介绍了在Vue项目中实现动态添加或者删除对象和对象数组的操作方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要介为大家详细绍了vue微信分享插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要给大家介绍了关于vue3中组件事件和defineEmits的相关资料,组件事件是Vue组件之间进行通信的一种方式,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-10-10
本文主要介绍了vue el-table实现递归嵌套的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
Vue3 setup的注意点及watch监视属性的六种情况分析
这篇文章主要介绍了Vue3 setup的注意点及watch监视属性的六种情况,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue使用echarts可视化组件的方法,本文通过实例代码案例给大家详细介绍，需要的朋友可以参考下2021-07-07
本篇文章主要介绍了vue 的keep-alive缓存功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
最新评论