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中所有实例中都可用的一个简单约定,这样做会避免和已被定义的数据,方法,计算属性产生冲突,下面这篇文章主要给大家介绍了关于vue中$含义及其用法的相关资料,需要的朋友可以参考下2023-04-04
本篇文章主要介绍了Vue2.0实现将页面中表格数据导出excel的实例，非常具有实用价值，感兴趣的同学可以了解一下2017-08-08
这篇文章主要介绍了使用Vue3实现羊了个羊的算法,初始化的随机位置算法，通过实例代码介绍了计算偏移量的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
这篇文章主要给大家介绍了关于vue自定义指令限制输入框输入值的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
vue中axios的get请求和post请求的传参方式、拦截器示例代码
Post是向服务器提交数据的一种请求,get是向服务器发索取数据的一种请求,post在真正接受数据之前会先将请求头发送给服务器进行确认,然后才真正发送数据,本文给大家介绍vue中axios的get请求和post请求的传参方式、拦截器示例代码,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了Vue学习之axios的使用方法,结合实例形式分析了vue.js axios库的功能及网络请求相关操作技巧,需要的朋友可以参考下2020-01-01
Vue3中实现二维码生成需要使用第三方库来处理生成二维码的逻辑,常用的库有 qrcode和 vue-qrcode,本文主要介绍了Vue3中使用qrcode库实现二维码生成,感兴趣的可以了解一下2023-12-12
本文主要介绍了vue实现页面渲染时候执行某需求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
本文主要介绍了vue封装el-upload批量上传只请求一次接口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了前端渐进式框架VUE的相关资料，文中讲解的非常细致，帮助大家开始学习VUE，感兴趣的朋友可以了解下2020-07-07
最新评论