使用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---数据列表过滤筛选的更多相关文章

  1. Vue 基本列表 && 数据过滤与排序

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  2. VUE:列表的过滤与排序

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 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 ...

  4. 从后端到前端之Vue(四)小试牛刀——真实项目的应用(树、tab、数据列表和分页)

    学以致用嘛,学了这么多,在真实项目里面怎么应用呢?带着问题去学习才是最快的学习方式.还是以前的那个项目,前后端分离,现在把前端换成vue的,暂时采用脚本化的方式,然后在尝试工程化的方式. 现在先实现功 ...

  5. 17_Vue列表过滤_js模糊查询

    列表过滤 需求分析 这里呢有张列表,假设这个列表有一百多条数据 当我在这个 搜索框当中 搜索 单个关键字的时候 (冬,周,伦),它能把带了这几个关键字的信息都给我罗列出来 === 跟数据库的 模糊查询 ...

  6. 【WPF】闲着没事,写了个支持数据列表分页的帮助类

    支持分页的MVVM组件大家可以网上找,老周这个类只是没事写来娱乐一下的,主要是功能简单,轻量级,至少它满足了我的需求,也许还有未知的 bug . 这个类支持对数据列表进行分页处理,原理是利用 Skip ...

  7. 用 jQuery.ajaxSetup 实现对请求和响应数据的过滤

    不知道同学们在做项目的过程中有没有相同的经历呢?在使用 ajax 的时候,需要对请求参数和响应数据进行过滤处理,比如你们觉得就让请求参数和响应信息就这么赤裸裸的在互联网里来回的穿梭,比如这样: 要知道 ...

  8. 页面设计-数据列表 DataGrid

    传统软件项目开发时,针对每个业务单据页面需要每控件一个一个的来设计,同时需要在页面功能中对每个控件的属性进行判定处理,尤其是页面风格布局样式需要花去一大半的时间,并且后续要想修改是非常麻烦繁琐,这样就 ...

  9. 记一次vue长列表的内存性能分析和优化

    好久没写东西,博客又长草了,这段时间身心放松了好久,都没什么主题可以写了 上周接到一个需求,优化vue的一个长列表页面,忙活了很久也到尾声了,内存使用和卡顿都做了一点点优化,还算有点收获 写的有点啰嗦 ...

随机推荐

  1. MySQL Disk--MySQL磁盘问题排查

    存储问题排查 1.检测磁盘空间使用率 df -lh 注意系统目录的可用空间 2.检查磁盘inode使用 df -i 参考:https://www.cnblogs.com/gaogao67/p/1088 ...

  2. pstree - 树状显示进程信息

    pstree - display a tree of processes(树状结构显示进程关系) 格式: pstree [option] option: -a --arguments:显示每个程序的完 ...

  3. SparkSQL读写外部数据源--数据分区

    import com.twq.dataset.Utils._ import org.apache.spark.sql.{SaveMode, SparkSession} object FileParti ...

  4. Centos7安装Hive2.3

    准备 1.hadoop已部署(若没有可以参考:Centos7安装Hadoop2.7),集群情况如下: hostname IP地址 部署规划 node1 172.20.0.4 NameNode.Data ...

  5. 图书检索系统C版本

    原创,转载请注明出处! 程序具有一下功能窗口界面1,Input输入(读入文件,所有的文件都读入)2,Output输出(检验是否读取正确,从结构体数组读入)3,Length统计(此文件里有110本图书) ...

  6. jmeter使用教程

    jmeter是基于JVM(最新版本基于jdk8+)的压测工具包.提供了丰富的工具来设置压测计划,执行压测任务和生成压测报告. 我这边使用的是windows10平台. 整个流程如下: 1.下载jmete ...

  7. 手工部署yugabyte的几点说明

    ntp 时间同步 ntp 时间同步对于yugabyte 是一个比较重要的服务,需要注意时间的同步 YB-Master 个数的说明 原则 YB-Master 的个数,必须和复制因子的个数一样,同时mas ...

  8. circus security 来自官方的安全建议

    转自:https://circus.readthedocs.io/en/latest/design/security/ Circus is built on the top of the ZeroMQ ...

  9. vue-element-admin 实现动态路由(从后台查询出菜单列表绑定)

    1. 在路由实例中保留基础路由 router/index.js中只需要保留基础路由,其他的都删了 2. 获取用户菜单,并保存到Vuex中 stroe/modules/user.js中,有个getInf ...

  10. ES6 解构对象和数组

    1.解构对象 let saveFiled = { extension: "jpg", name:"girl", size:14040 }; ES5 functi ...