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

我这个文章是介绍第二种情况，主要是要先了解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. js随机生成验证码以及随机颜色
			
    Javascript通过Math.random()随机生成验证码. 代码如下: <!DOCTYPE html><html> <head> <meta char ...
    
			
    2. 
						
  2. ‎Cocos2d-x 学习笔记(21.1) ScrollView “甩出”效果与 deaccelerateScrolling 方法
			
    1. 简介 “甩出”效果是当我们快速拖动container并松开后,container继续朝原方向运动,但是渐渐减速直到停止的效果. ScrollView的onTouchEnded方法会设置Timer ...
    
			
    3. 
						
  3. 我家很管事的猫——mycat初步部署实践与问题排查
			
    mycat,阿里出品的mysql中间件,提供读写分离和分库分表方案.项目中主要使用的是其读写分离功能. [如何部署?] 本文只采用并测试了双主从模式,配置看这一篇足矣: https://www.cnb ...
    
			
    4. 
						
  4. 上传文件夹或上传文件到linux
			
    http://jingyan.baidu.com/article/d169e18658995a436611d8ee.html https://www.cnblogs.com/nbf-156cwl/p/ ...
    
			
    5. 
						
  5. 利用phar实行php反序列化命令执行漏洞复现
			
    利用phar实行php反序列化命令执行(测试环境复现) 前言 一般说到反序列化漏洞,第一反应都是unserialize()函数.然而安全研究员Sam Thomas分享了议题”It’s a PHP un ...
    
			
    6. 
						
  6. opencv::基本阈值操作
			
    图像阈值(threshold) 阈值 是什么?简单点说是把图像分割的标尺,这个标尺是根据什么产生的,阈值产生算法?阈值类型.(Binary segmentation) 阈值类型一阈值二值化(thres ...
    
			
    7. 
						
  7. 百万年薪python之路  --  socket()模块的用法
			
    socket()模块的用法: import socket socket.socket(socket_family,socket_type,protocal=0) socket_family 可以是 A ...
    
			
    8. 
						
  8. 拨云见日，彻底弄清楚Java日志框架 log4j, logback, slf4j的区别与联系
			
    log4j 以及 logback, slf4j 官网 日志框架的困惑 作为一个正常的项目,是必须有日志框架的存在的,没有日志,很难追踪一些奇奇怪怪的系统问题. 但是,我们经常在项目的依赖中,见到奇奇怪 ...
    
			
    9. 
						
  9. Java11新特性 - Epsilon GC和ZGC
			
    Java11中新增了两个GC,Epsilon GC和ZGC. Epsilon垃圾收集器 A NoOp Garbage Collector 没有操作的垃圾收集器 JDK上对这个特性的描述是:开发一个处理 ...
    
			
    10. 
						
  10. 如何在vue里引入Bootstrap
			
    一.引入jquery 步骤: 1. 安装jquery $ npm install jquery --save-dev 2.在webpack.config.js 添加内容 + const webpack ...
    
			
    11.