vue---数据列表过滤筛选
使用vue进行数据过滤筛选是比较常用的功能,常见的使用场景就是搜索框数据筛选过滤了。简单示例:
<template>
<div>
<input type="text" v-model="search">
<ul>
<!-- 注意!注意!注意!这里循环遍历的是items,不再是data里的list数组 -->
<li v-for="(item,index) in items">
<span>{{item.name}}</span>
<span>{{item.msg}}</span>
<span>{{item.age}}</span>
<span>{{item.title}}</span>
</li>
</ul>
</div>
</template> <script>
export default {
name: "DataForm",
data() {
return {
search:'',
list:[
{id:0,name:'AAA',msg:'aaa文本介绍1',title:'水电费',age:366},
{id:1,name:'BBB',msg:'bbb文本介绍2',title:'赵子龙',age:235},
{id:2,name:'CCC',msg:'ccc文本介绍3',title:'赵性',age:587},
{id:3,name:'DDD',msg:'ddd文本介绍4',title:'展飞',age:654},
{id:4,name:'EEE',msg:'eee文本介绍5',title:'收费',age:987},
{id:5,name:'FFF',msg:'Aa文本介绍6',title:'收费',age:6985},
]
};
},
computed:{
// 筛选指定字段
items:function(){
let _search = this.search;
let reg = new RegExp(_search, 'ig');// 不区分大小写
if(_search){
return this.list.filter(function(item){
if((item.id.toString().indexOf(_search) != -1) || item.msg.match(reg) || (item.age.toString().indexOf(_search) != -1)){
return item;
}
});
}
return this.list;
},
// 筛选所有的字段
itemss: function() {
var _search = this.search;
console.log(_search);
if(_search){
// 不区分大小写处理
var reg = new RegExp(_search, 'ig')
// es6 filter过滤匹配,有则返回当前,无则返回所有
return this.list.filter(function(e) {
// 匹配所有字段
return Object.keys(e).some(function(key) {
return e[key].match(reg);
})
// 匹配某个字段
// return e.name.match(reg);
})
};
return this.list;
}
}
};
</script>
vue---数据列表过滤筛选的更多相关文章
- Vue 基本列表 && 数据过滤与排序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- VUE:列表的过滤与排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现(2022/7/13)
文章目录 1.基本列表 1.1 基本知识 1.2 代码实例 1.3 测试效果 2.key的原理 2.1基本知识 2.2 代码实例 2.3 测试效果 2.4 原理图解 3.列表过滤 3.1 代码实例 3 ...
- 从后端到前端之Vue(四)小试牛刀——真实项目的应用(树、tab、数据列表和分页)
学以致用嘛,学了这么多,在真实项目里面怎么应用呢?带着问题去学习才是最快的学习方式.还是以前的那个项目,前后端分离,现在把前端换成vue的,暂时采用脚本化的方式,然后在尝试工程化的方式. 现在先实现功 ...
- 17_Vue列表过滤_js模糊查询
列表过滤 需求分析 这里呢有张列表,假设这个列表有一百多条数据 当我在这个 搜索框当中 搜索 单个关键字的时候 (冬,周,伦),它能把带了这几个关键字的信息都给我罗列出来 === 跟数据库的 模糊查询 ...
- 【WPF】闲着没事,写了个支持数据列表分页的帮助类
支持分页的MVVM组件大家可以网上找,老周这个类只是没事写来娱乐一下的,主要是功能简单,轻量级,至少它满足了我的需求,也许还有未知的 bug . 这个类支持对数据列表进行分页处理,原理是利用 Skip ...
- 用 jQuery.ajaxSetup 实现对请求和响应数据的过滤
不知道同学们在做项目的过程中有没有相同的经历呢?在使用 ajax 的时候,需要对请求参数和响应数据进行过滤处理,比如你们觉得就让请求参数和响应信息就这么赤裸裸的在互联网里来回的穿梭,比如这样: 要知道 ...
- 页面设计-数据列表 DataGrid
传统软件项目开发时,针对每个业务单据页面需要每控件一个一个的来设计,同时需要在页面功能中对每个控件的属性进行判定处理,尤其是页面风格布局样式需要花去一大半的时间,并且后续要想修改是非常麻烦繁琐,这样就 ...
- 记一次vue长列表的内存性能分析和优化
好久没写东西,博客又长草了,这段时间身心放松了好久,都没什么主题可以写了 上周接到一个需求,优化vue的一个长列表页面,忙活了很久也到尾声了,内存使用和卡顿都做了一点点优化,还算有点收获 写的有点啰嗦 ...
随机推荐
- 卓越Code第一次作业
第一次团队作业 序言 所属课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign 作业要求 https://w ...
- jquery 表单元素选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- siblings,next,prev
同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. 在 DOM 树中水平遍历 siblings() next() nextAll() nextUntil() pre ...
- MySQL入门篇之mysqldump备份和恢复
一.备份单个数据库 1.备份命令:mysqldump MySQL数据库自带的一个很好用的备份命令.是逻辑备份,导出 的是SQL语句.也就是把数据从MySQL库中以逻辑的SQL语句的形式直接输出或生成备 ...
- Django REST framework视图
混合类阶段(封装2次) 路由: url(r'school/$', views.SchoolView.as_view()), url(r'school/(?P<pk>\d+)/$', vie ...
- war包部署到服务器后,如何直接访问,而不需要在地址后面加war包名
正常情况下,但我们把war部署到服务器上,访问地址是:服务器ID:端口/war包名 但是如果个人建站显然不适合以此方式. 方式一:修改服务器Tomcat的server.xml配置 注意:你的报名如果是 ...
- 做勇敢女孩 https://www.bilibili.com/video/av14346123?from=search&seid=14078047355739050009
So a few years ago, I did something really brave, or some would say really stupid. I ran for congres ...
- Xamarin开发及学习资源
入行文章指引 移动开发下Xamarin VS PhoneGap 跨平台开发 许多企业希望能够通过开发移动应用程序,来提升企业业务水平,开发原生App时往往又缺少专业的Objective C 或 Jav ...
- .NET API Gateway Ocelot 介绍
项目:https://github.com/ThreeMammals/Ocelot Windows (AppVeyor) Linux & OSX (Travis) Windows Ma ...
- 25-ESP8266 SDK开发基础入门篇--控制WIFI连接路由器
https://www.cnblogs.com/yangfengwu/p/11324411.html 说个事情,现在SDK的版本已经出到3.0了,但是我还是使用2.0 如果只是为了学习研究 选择3 ...