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 相关文章推荐
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 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 模拟get_headers函数的代码示例
2013/04/27 PHP
php函数与传递参数实例分析
2014/11/15 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
解读ES6中class关键字
2017/11/20 Javascript
使用JavaScript破解web
2018/09/28 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
python实现堆栈与队列的方法
2015/01/15 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
Python tkinter实现日期选择器
2021/02/22 Python
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
中科前程Java笔试题
2016/11/20 面试题
车工岗位职责
2013/11/26 职场文书
市场营销战略计划书
2014/05/06 职场文书
走进敬老院活动总结
2014/07/10 职场文书
博士生专家推荐信
2014/09/26 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python