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的一个长列表页面,忙活了很久也到尾声了,内存使用和卡顿都做了一点点优化,还算有点收获 写的有点啰嗦 ...
随机推荐
- myEclipse项目部署点击Finish按钮没反应
-- 问题描述:myEclipse项目部署点击Finish按钮没反应. -- 问题原因:Tomcat没有不熟JDK. -- 解决办法:window->preferences->servic ...
- golang读写文件
1. 标准输入输出 os提供了标准输入输出文件: Stdin = NewFile(uintptr(syscall.Stdin), "/dev/stdin") Stdout = Ne ...
- python笔记--------一
作用域: 每个变量或函数都有自己的作用域. 每个函数都定义了一个命名空间,也称为作用域. 在最顶层有一个符号表会跟踪这一层所有的名称定义和和他们当前的绑定. 调用函数时,会建立一个新的符号表(常称为栈 ...
- python基础---python基础语法
1.常用符号 逗号,枚举:一个函数有多个参数sum(1,2) 等于,赋值:把一个值,给一个变量,a=1 括号,函数的参数部分sum(x,y) 冒号,一个子过程的开始 双引号/单引号:表示字符串 运算符 ...
- poj1679The Unique MST(次小生成树模板)
次小生成树模板,别忘了判定不存在最小生成树的情况 #include <iostream> #include <cstdio> #include <cstring> ...
- win10永久激活方法(真正永久激活)
win10的花费不低,所以很多电脑用户选择搜索激活,但是大部分用的激活工具激活的基本上都是假激活(或许本来就是),kms激活和试用账号临时激活都是有时间限制的,虽然到时都可以继续,但是系统还是明确此激 ...
- 项目Alpha冲刺总结随笔
班级:软件工程1916|W 作业:项目Alpha冲刺 团队名称:SkyReach 目标:完成项目Alpha版本 项目Github地址 团队博客汇总 队员学号 队员姓名 个人博客地址 备注 221600 ...
- 按键精灵PC端脚本
定义变量的时候不需要定义类型 ,由于是易语言,变量名可以是中文 文本路径 = "C:\Users\Administrator\Desktop\1.txt"//改成自己的文本路径 T ...
- python的numpy.array
为什么要用numpy Python中提供了list容器,可以当作数组使用.但列表中的元素可以是任何对象,因此列表中保存的是对象的指针,这样一来,为了保存一个简单的列表[1,2,3].就需要三个指针和三 ...
- HDU - 5513 Efficient Tree(轮廓线DP)
前言 最近学了基于连通性的状压DP,也就是插头DP,写了几道题,发现这DP实质上就是状压+分类讨论,轮廓线什么的也特别的神奇.下面这题把我WA到死- HDU-5531 Efficient Tree 给 ...