vue input输入框关键字筛选检索列表数据展示


Posted in Javascript onOctober 26, 2020

想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下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实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 #Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 #Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 #Javascript
Vue实现搜索结果高亮显示关键字
May 28 #Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 #Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
小程序多图列表实现性能优化的方法步骤
May 28 #Javascript
You might like
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
Use Word to Search for Files
2007/06/15 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
jquery 使用简明教程
2014/03/05 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
详解Python import方法引入模块的实例
2017/08/02 Python
在Python中COM口的调用方法
2019/07/03 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
会计专业自我鉴定范文
2013/10/06 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
护士辞职信模板
2014/01/20 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
追悼词范文大全
2015/06/23 职场文书