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_09_Function与Object
Oct 16 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
BootStrap中
Dec 10 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
vant中的toast层级改变操作
Nov 04 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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 查找字符串常用函数介绍
2012/06/07 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
php文件上传的两种实现方法
2016/04/04 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
个人简历的自荐信
2013/10/23 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
保险公司年会主持词
2014/03/22 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
学习计划是什么
2019/04/30 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
教你怎么用Python实现多路径迷宫
2021/04/29 Python
详解Vue的列表渲染
2021/11/20 Vue.js