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

我这个文章是介绍第二种情况，主要是要先了解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. Vue部分编译不生效,解决Vue渲染时候会闪一下
			
    0828自我总结 Vue部分编译不生效,解决Vue渲染时候会闪一下 一.Vue编译不生效 在标签里添加v-pre <script src="vue.js"></s ...
    
			
    2. 
						
  2. PHP next
			
    1.函数的作用:返回数组当前元素位置的下一个元素 2.函数的参数: @param array &$array 3. 例子一:数组拷贝时,内部指针的位置也一起拷贝 <?php $arr1  ...
    
			
    3. 
						
  3. PHP array_slice
			
    1.函数的作用:返回数组中的部分区间的元素 2.函数的参数: @params  array  $array @params  int      $offset @params  int      $l ...
    
			
    4. 
						
  4. 高精度运算略解  在struct中重载运算符
			
    高精度 高精度,即高精度算法,属于处理大数字的数学计算方法.在一般的科学计算中,会经常算到小数点后几百位或者更多,当然也可能是几千亿几百亿的大数字. 重载运算符 运算符重载,就是对已有的运算符重新进行 ...
    
			
    5. 
						
  5. Knative 实战：基于 Kafka 实现消息推送
			
    作者 | 元毅 阿里云智能事业群高级开发工程师 导读:当前在 Knative 中已经提供了对 Kafka 事件源的支持,那么如何基于 Kafka 实现消息推送呢?本文作者将以阿里云 Kafka 产品为 ...
    
			
    6. 
						
  6. 电脑扫描不出u盘的解决办法
			
    现象:u盘已插上但是设备和驱动器里却找不到 解决办法: 首先记下u盘名称,然后 我的电脑-右键-管理-设备管理器,找到u盘,卸载设备后重新插入u盘即可
    
			
    7. 
						
  7. The usage of Markdown---目录
			
    更新时间:2019.09.14   当我们编辑的内容比较多时,通常要生成目录来进行页内跳转.除了之前提到过的页内跳转链接的方法,还有一种方法--目录树,能够自动生产目录,大大减少工作量. tip1:  ...
    
			
    8. 
						
  8. Java基础（十九）集合（1）集合中主要接口和实现类
			
    1.Java集合框架为不同类型的集合定义了大量接口 其中,集合有两个基本接口:Collection和Map. 2.各接口的主要特征如下 (1)Collection接口:是List接口.Set接口和Qu ...
    
			
    9. 
						
  9. mysql的一些常用操作（一）
			
    1.启动Mysql服务 net start mysql 2.进入mysql环境中,由于自己没有设置密码,直接回车进入即可(要将bin加入到环境变量path中) mysql -u root -p 3.创 ...
    
			
    10. 
						
  10. Android H5混合开发（5）：封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova
			
    近期,有同事咨询如何在Fragment中使用Cordova,看了下Cordova源码,官方并没有提供包含Cordova Webview的Fragment,以供我们继承. 上网查询了一下,也有几篇文章讲 ...
    
			
    11.