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 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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.MVC的模板标签系统(三)
2006/09/05 PHP
PHP+javascript液晶时钟
2006/10/09 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
vue接口请求加密实例
2020/08/11 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
建筑施工实习自我鉴定
2013/09/19 职场文书
自荐信格式的六要素
2013/09/21 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
黄埔军校观后感
2015/06/10 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android