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 相关文章推荐
js里的prototype使用示例
Nov 19 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
什么是SOLID
Mar 24 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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之第六天
2006/10/09 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JavaScript获取Url里的参数
2014/12/18 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
详解Node.js异步处理的各种写法
2019/06/09 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python闭包思想与用法浅析
2018/12/27 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
详解如何减少python内存的消耗
2019/08/09 Python
Python zip函数打包元素实例解析
2019/12/11 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
党员评议自我评价
2015/03/03 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js