根据组件的业务需要，有时候搜索是把关键字返回给后台，后台处理后再把数据返回给前端渲染（多次请求服务器）；有时候是前端把页面的数据全部获取下来，前端处理关键字的搜索（影响页面加载）

我这个文章是介绍第二种情况，主要是要先了解es6的filter（）和includes（）

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。不会对空数组进行检测。不会改变原始数组。

array.filter(function(currentValue,index,arr), thisValue)
可以点击了解http://www.runoob.com/jsref/jsref-filter.html实例：https://blog.csdn.net/bossxu_/article/details/80756563

includes() 方法用来判断一个数组或字符串是否包含一个指定的值，如果是返回 true，否则false

　　

可以点击了解http://www.runoob.com/jsref/jsref-filter.html

哈哈哈知道这两个函数后就很简单了

1.搜索栏

2.搜索出对应的列表（class的命名不要学不要用下划线）

3，在watch中监听（this.allOptions是你已经从后台获取到所有数据存储起来的）





												


											
vue 前端处理监听关键字搜索的更多相关文章
	

    
								
  1. vue mounted中监听div的变化
		
    vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...
    
		
    2. 
						
  2. Vue之数据监听存在的问题
		
    Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...
    
		
    3. 
						
  3. Vue的watch监听事件
		
    Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
    
		
    4. 
						
  4. Vue watch 深层监听
		
    Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...
    
		
    5. 
						
  5. Vue之watch监听对象中某个属性的方法
		
    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 {  ...
    
		
    6. 
						
  6. vue 使用watch监听实现类似百度搜索功能
		
    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...
    
		
    7. 
						
  7. 009——VUE中watch监听属性变化实现类百度搜索栏功能
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    8. 
						
  8. vue项目如何监听窗口变化，达到页面自适应？
		
    [自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
    
		
    9. 
						
  9. Vue使用watch监听一个对象中的属性
		
    问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedSta ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 代码审计-YXcms1.4.7
			
    题外: 今天是上班第一天,全都在做准备工作,明天开始正式实战做事. 看着周围稍年长的同事和老大做事,自己的感觉就是自己还是差的很多很多,自己只能算个废物. 学无止境,我这样的垃圾废物就该多练,保持战斗 ...
    
			
    2. 
						
  2. 微信小程序实现九宫格切图，保存功能！
			
    效果如下图: 代码如下: <view class='sudoku'> <scroll-view scroll-x scroll-y class='canvas-box'> &l ...
    
			
    3. 
						
  3. selenium-find_element相关内容（2）
			
    find_element跟find_element_by_xxx的区别 1.查看文件D:\soft\python36\Lib\site-packages\selenium\webdriver\remo ...
    
			
    4. 
						
  4. 详解Java8 Optional类{最全}
			
    1:Optional 1.1 概述 Optional 类主要解决的问题是臭名昭著的空指针异常(NullPointerException),提供了一些的方法代替过去的if-else处理逻辑,并与Stre ...
    
			
    5. 
						
  5. 斯坦福机器学习课程 Exercise 习题二
			
    Exercise 2: Linear Regression 话说LaTex用起来好爽 Matlab代码 迭代并且画出拟合曲线 Linear regression 公式如下 hθ(x)=θTx=∑i=0 ...
    
			
    6. 
						
  6. krry-transfer ⏤ 基于 element 的升级版穿梭框组件发布到 npm 啦
			
    博客地址:https://ainyi.com/81 基于 element ui 的==升级版穿梭框组件==发布到 npm 啦 看过我之前博客的同学或许知道我之前写过关于 element 穿梭框组件重构 ...
    
			
    7. 
						
  7. SpringBoot注入配置文件的3种方法
			
    方案1:@ConfigurationProperties+@Component 定义spring的一个实体bean装载配置文件信息,其它要使用配置信息是注入该实体bean /** * 将配置文件中配置 ...
    
			
    8. 
						
  8. SQLite AUTOINCREMENT
			
    只有integer字段可以设置autoincrement.int不行.integer是无符号整型.
    
			
    9. 
						
  9. 面向对象的7个设计原则->开车理解->贴近生活
			
    设计模式在我们的开发中是不可或缺的一部分,很多人会说,我没用那些设计模式啊,我也开发的挺好的,其实不然,我们在开发中都用到了这些设计模式,只不过我们并没有在意这些,今天我就用开车的方法来解释一下我们的 ...
    
			
    10. 
						
  10. Mybaits 源码解析 （七）----- Select 语句的执行过程分析（下篇）（Mapper方法是如何调用到XML中的SQL的？）全网最详细，没有之一
			
    我们上篇文章讲到了查询方法里面的doQuery方法,这里面就是调用JDBC的API了,其中的逻辑比较复杂,我们这边文章来讲,先看看我们上篇文章分析的地方 SimpleExecutor public & ...
    
			
    11.