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

我这个文章是介绍第二种情况，主要是要先了解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. unittest介绍
			
    unittest框架是python中一个标准的库中的一个模块,该模块包括许多的类如 test case类.test suit类.texttest runner类.texttest resuite类.t ...
    
			
    2. 
						
  2. Oracle基于布尔的盲注总结
			
    0x01 decode 函数布尔盲注 decode(字段或字段的运算,值1,值2,值3) 这个函数运行的结果是,当字段或字段的运算的值等于值1时,该函数返回值2,否则返回3 当然值1,值2,值3也可以 ...
    
			
    3. 
						
  3. Ubunut18 安装docker环境&&AWD攻防平台部署
			
    docker:有两个版本:docker-ce(社区版)和docker-ee(企业版). 参考官网地址:https://docs.docker.com/engine/installation/linux ...
    
			
    4. 
						
  4. Cocos2d-x 学习笔记(10) ActionInstant
			
    1.概述 ActionInstant的子类都是立即完成的动作,即一帧就完成了,不像ActionInterval的子类动作需要定义动作总时间. Action类的继承关系图: 2.具体 ActionIns ...
    
			
    5. 
						
  5. Unity的学习笔记（射线检测）
			
    首先,射线检测的API是这样的,网上找了一下,这个图片看得很清楚: 接下来是自己使用这个进行测试 using System.Collections; using System.Collections. ...
    
			
    6. 
						
  6. java集合之Vector向量基础
			
    Vector向量: vector类似动态数组,向量和数组类似,但是数组容量一旦确定不可更改,而向量的容量可变.向量只可以保存任何类型对象且容量不限制,数组对元素类型无限制但是容量有限. 适用场合:向量 ...
    
			
    7. 
						
  7. 推荐几个IT交流社区
			
    博客园,csdn,掘金,StackOverflow(境外),v2ex,开源中国,简书,头条
    
			
    8. 
						
  8. Android SDK安装与环境变量的配置(windows系统)
			
    (一)下载Android SDK压缩包 解压后即可(全英文路径,以免后续出现乱码) (1)下载地址:http://tools.android-studio.org/index.php/sdk
    
			
    9. 
						
  9. BrickerBot
			
    BrickerBot 概况 <大华(Dahua)安防监控设备弱口令问题报告 >主要提到是Telnet弱口令 root/vizxv 相关链接:(发布时间:2015年4月1日) 通过Telne ...
    
			
    10. 
						
  10. mp-vue实现小程序回顶操作踩坑，wx.pageScrollTo使用无效填坑
			
    本来项目都写的差不多了,测试测着侧着就冒出了新的想法,我因为做的是问卷,因此会有用户必答题未答完的可能存在,本来市场部给的需求就是做一个弹窗就好了,她说想要做出跳回到用户未答的第一道题,好吧,既然都这 ...
    
			
    11.