vue如何通过日期筛选数据
目录
- 如何通过日期筛选数据
- 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自定义验证之日期时间选择器 今日需求 期望效果 干货 效果 vue项目时间选择器 html里面 js里面 Vue自定义验证之日期时间选择器 自定义验证 今日需求期望效果干货value-format 效果推荐 今日需求 查询条件中 当开始时间 和 结束时间 一致时 提示结束时间大于开始时间 期望效果 干货 <el-form :inline="true" :rules="rules"> <el-form-item label="创
-
vue 数据遍历筛选 过滤 排序的应用操作
vue 中对v-for 遍历数据的处理方式 可以分为两类 : 一.对data 直接赋值(比较笨,但是比较直接) <div id="app"> <ul> <li v-for="item in list">{{item.n}}</li> </ul> </div> </body> <script> var app=new Vue({ el:'#app', data:{ list
-
Vue日期时间选择器组件使用方法详解
本文实例为大家分享了Vue日期时间选择器组件的具体代码,供大家参考,具体内容如下 1.效果图如下 单选日期选择器 多选日期选择器 日期时间选择器 2.准备 Date原型格式化工具方法 Date.prototype.format = function(fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": thi
-
vue如何通过日期筛选数据
目录 如何通过日期筛选数据 vue简单数据筛选 如何通过日期筛选数据 此片博客介绍的方法是通过请求后台数据给的状态,然后把自己选择的时间传过去实现筛选的,根据业务逻辑来参考吧! 下篇我们会说下通过vue过滤器来实现的方法! 业务逻辑:首先前端需要获取其用户选择的日期数据,然后通过接口把日期数据传给后端,后端接收数据会返回给前端新的数据,页面在进行渲染.到此功能会是实现了 html部分 <div class="ag_listmain clearfix">
-
Vue通过input筛选数据
本文实例为大家分享了Vue通过input筛选数据的具体代码,供大家参考,具体内容如下 <div id="app"> <input v-model='search' /> <ul> <li v-for="item in items"> <label>价格</label><span v-html="item.name"></span> <label&
-
pandas 按日期范围筛选数据的实现
pandas 是 python 中一个功能强大的库,这里就不再复述了,简单介绍下用日期范围筛选 pandas 数据. 日期转换 用来筛选的列是 date 类型,所以这里要把要筛选的日期范围从字符串转成 date 类型 比如我的数据包含列名为 trade_date,从 20050101 - 20190926 的数据,我要筛选出 20050606 - 20071016 的数据,那么,先如下转换数据类型: s_date = datetime.datetime.strptime('20050606',
-
Vue实现表格中对数据进行转换、处理的方法
众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在Vue中,如果采用了element等组件,利用数据绑定的特性,也是很难对表格遍历的数据进行单独行的处理的. 我们这边取一个例子来说.比如Mysql datetime 类型的数据与我们一般的显示的形式是不一样的,为了用户更好的体验,势必需要对时间格式进行转换的. 下图是从mysql中默认取出的date
-
基于DataFrame筛选数据与loc的用法详解
DataFrame筛选数据与loc用法 python中pandas下的DataFrame是一个很不错的数据结构,附带了许多操作.运算.统计等功能. 如何从一个DataFrame中筛选中出一个元素呢. 以tushare返回的交易日信息为例. df = ts.trade_cal() 数据如下: calendarDate isOpen 0 1990/12/19 1 1 1990/12/20 1 2 1990/12/21 1 3 1990/12/22 0 4 1990/12/23 0 5 1990/12
-
vue过滤器实现日期格式化的案例分析
说明 今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例. 大家都知道,我们获取当前日期可以通过Date对象获取.下面我将获取当前时间并打印出来. console.log(new Date()); 我们获取的是一个标准时间,控制台的输出如下所示. 在实际项目开发中,我们通常获取标准时间后不是直接拿来使用,而是要进行一些操作然后将它显示在页面中,我们将这些操作称作时间格式化. 过滤器 在vue中,我们可以使用过滤器来进行时间格式化.它的写法如下: // Vue.filter(过滤器
-
vue商城中商品“筛选器”功能的实现代码
在使用vue搭建商城项目的时候,要实现一个商品筛选器的功能,在完成之后,再一次被vue的数据驱动的强大感到震撼! 首先,我们来看一下具体的需求吧.你可以先看下面的这两张图,然后再看文字描述,可能会更容易理解. 没有触发时的状态 触发后的状态 我们需求有下面几点: 1.默认情况下,只显示一级菜单,二级菜单不显 2.存在二级菜单的情况下,在二级菜单没有显示的情况下,点击一级菜单,一级菜单的样式发生改变,二级菜单不显示 3.存在二级菜单的情况下,一级菜单已经点
-
vue实现前端保持筛选条件到url并进行同步参数设计
目录 前言 基础知识 设计思路 decode encode 详情页返回列表页 结语 前言 在有列表页的系统中,常常为了提高用户体验,需要保持列表页的筛选条件.分页情况.需要做到刷新页面,从详情页返回列表页保留之前的筛选情况.你可能会说 vue 用 keep-alive 缓存列表页不就行了?为什么不好呢? 因为正确的做法是将筛选条件保存在 url 上,这样可以复制给别人直接使用,并且你可以看到几乎所有网站都是使用这种方法.接下来会带大家了解有关 url 参数的基础知识和设计思路.并且封装成了一个
-
Vue支持搜索与筛选的用户列表实现流程介绍
目录 1. 常规风格的示例工程开发 2. 使用组合式API重构用户列表页面 3. 优化用户列表页面 1. 常规风格的示例工程开发 首先新建一个名为 normal.html 的测试文件,在HTML文件的head标签中引入Vue框架并设置常规的模板字段如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=
-
vue+element表格实现多层数据的嵌套方式
目录 vue+element表格实现多层数据嵌套 这是完成之后的 方法 vue+element表格实现多层数据嵌套 今天用element的表格渲染了商城的购物车列表,element的表格之前也用到过,它把所有的东西都封装好了, 这是完成之后的 只需要往里面传数据就可以了,通过prop来拿到相对应的字段,非常方便,但是天不尽人愿呐,后台接口返回的数据 是嵌套多了一层,直接上图,后台返回的数据结构 data下面是店铺的名字和id,orderItemList是店铺下面的商品,店铺要