vue input输入框关键字筛选检索列表数据展示
想必大家在项目开发中难免会用到关键字筛选的功能，正好这次项目有需求要做这一块，就整理一下vue的input输入框输入关键字检索数据列表的代码。下面直接上代码：
html：
<!-- 筛选demo -->
<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>
</li>
</ul>
</div>
</template>
匹配（所有||单个）字段 > js：
export default {
data () {
return {
search:'',
list:[
{name:'AAA',msg:'aaa文本介绍1'},
{name:'BBB',msg:'bbb文本介绍2'},
{name:'CCC',msg:'ccc文本介绍3'},
{name:'DDD',msg:'ddd文本介绍4'},
{name:'EEE',msg:'eee文本介绍5'},
]
}
},
computed: {
//过滤方法
items: function() {
var _search = this.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;
}
},
}
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
我正在尝试用Angular 7建立一个动态研究。我正在用多个键从API中获取一个数组：[_id= 我用ngFor显示我所有的结果，我已经用我找到的教程创建了一个过滤管道… 这是我的研究部分： 这是我的过滤管功能： 但是这只会过滤这样的数组：[
-
我有一个形式的字典： 我想过滤列表，以删除索引中的每一项，其中索引中的不是 输出应如下所示： 因为的第一个值不是 我试过这样的方法： 但这只适用于一把钥匙。 回复：下面有很多好的解决方案。我只是在想另一个。 将这个列表结构转换成一个元组列表： 然后我只需要通过每个元组的第二个项目来过滤这个列表，这很容易：
-
问题内容： 我有这个数组： 并且我正在寻找一个PHP“ for each”循环，该循环将检索下的键名，即： 我怎样才能做到这一点？ 问题答案： 试试吧 在$ key中，您将获得密钥名称，在val中，您将获得值
-
本文向大家介绍vue+elementUI实现表格关键字筛选高亮，包括了vue+elementUI实现表格关键字筛选高亮的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码，供大家参考，具体内容如下 代码： 效果图： 关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。 更多vue学习教程请阅读专题《vue实战教
-
有什么快速的方法可以过滤列表并获得值的索引吗？ 我想拿到我找到的东西的索引？
-
我有一个，如下所示： 我试图创建一个新的数据帧的基础上过滤前一个数据帧的行匹配的值列表。我已经尝试了下一段代码： 但是我犯了一个错误。我期待着下一个结果： 我正在寻找一种灵活的解决方案，它允许根据匹配列表中比示例中所示元素更多的元素进行筛选。
-
使用JQuery Datatable与输入和选择如下图所示：http://datatables.net/examples/api/form.html或者如果我使用自定义列渲染处理程序来生成输入和选择如何使全局表搜索工作？ 如果您查看这个示例，您会注意到搜索中只包含第一列，即只读列，我可以做些什么来将其他列包含在搜索中？ 如果您在“我的问题”的链接中查看示例，并在搜索中键入“Tokyo”，则返回所有
-
代码如下： 主要切换筛选功能，列表列操作点击触发弹框，数据对应不上，列表是封装好的，代码如下 // 获取流程数据 this.groupId是要传的id 现在是新写页面，主要把对应的格式传给原来封装好的格式就可以展示在页面，但是现在通过点击下拉框筛选功能，点击行的操作 一直传同一个 groupId，请问大佬们怎么规避这个问题呢 期望拿到的id是 是不同的