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网络请求的三种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-09-09
vue实现拖拽的简单案例不超出可视区域
这篇文章主要为大家详细介绍了vue实现拖拽的简单案例，不超出可视区域，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
深入浅析vue中cross-env的使用
cross-env是跨平台设置和使用环境变量的脚本。这篇文章主要介绍了vue中cross-env的使用,需要的朋友可以参考下
2019-09-09
一文学会什么是vue.nextTick()
这篇文章主要介绍了一文学会什么是vue.nextTick()，下面文章围绕主题的相关资料展开详细内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-04-04
vue中使用echarts的方法实例详解
这篇文章主要介绍了vue中使用echarts的方法,结合实例形式详细分析了vue中使用echarts的包安装、引入、生命周期函数元素挂载等相关操作技巧与使用注意事项,需要的朋友可以参考下
2023-05-05
Vue接入高德地图的完整实例
近期在用vue做一个环保类的项目,要求使用高德地图,下面这篇文章主要给大家介绍了关于Vue接入高德地图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
vue.js 实现输入框动态添加功能
这篇文章主要介绍了vue.js 实现输入框动态添加功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
vue实现多个数组合并
这篇文章主要介绍了vue实现多个数组合并方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
实例分析vue循环列表动态数据的处理方法
本篇文章给大家详细分享了关于vue循环列表动态数据的处理方法以及相关知识点内容，有需要的朋友们参考下。
2018-09-09
一文教会你如何运行vue项目
最近因为公司项目问题,开始学习vue,这篇文章主要给大家介绍了关于如何运行vue项目的相关资料,文中还介绍了如何运行别人的项目,需要的朋友可以参考下
2022-06-06