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

我这个文章是介绍第二种情况，主要是要先了解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. ASP.NET Core API ——Dapper的使用
			
    ASP.NET Core API ——Dapper的使用 简介:Dapper是一个ORM框架,负责数据库和程序语言之间的映射. 使用步骤: l  创建一个IDBConnection的接口对象 l  编 ...
    
			
    2. 
						
  2. Python开发【第三篇】数据类型
			
    1.数字类型 int 整数 1 2 3 float 浮点数 1.1 0.9 0.99 complex 复数 (2+0j) str 字符串 'hello world' "hello world ...
    
			
    3. 
						
  3. 使用Spring 或Spring Boot实现读写分离（ MySQL实现主从复制）
			
    http://blog.csdn.net/jack85986370/article/details/51559232 http://blog.csdn.net/neosmith/article/det ...
    
			
    4. 
						
  4. python中的随机函数
			
    python--随机函数(random,uniform,randint,randrange,shuffle,sample) 本文转载自:[chamie] random() random()方法:返回随 ...
    
			
    5. 
						
  5. （转载）linux命令-sed
			
    原文地址:https://www.cnblogs.com/zhangzongjian/p/10708222.html
    
			
    6. 
						
  6. SpringBoot生命周期管理之停掉应用服务几种方法
			
    前言 在生产环境下管理Spring Boot应用的生命周期非常重要.Spring容器通过ApplicationContext处理应用服务的所有的beans的创建.初始化.销毁. 本文着重于生命周期中的 ...
    
			
    7. 
						
  7. 从零开始把项目发布到NPM仓库中心
			
    从零开始把项目发布到NPM仓库中心 前期准备 注册账号 https://www.npmjs.com/signup 网易邮箱注册失败,用QQ邮箱成功 使用npm 命令注册(建议使用网页): npm ad ...
    
			
    8. 
						
  8. 自定义表头Datagrid
			
    自定义的一个表头 <bp:BasePage x:Class="NetReform.Pages.RealProbabiTableCompare" xmlns="htt ...
    
			
    9. 
						
  9. Shiro learning - 认证流程(3)
			
    Shiro认证流程 在学习认证流程之前,你应该先了解Shiro的基本使用流程 认证 身份认证: 证明用户是谁.用户需要提供相关的凭证principals(身份标识)和Credentials (凭证,证 ...
    
			
    10. 
						
  10. Leetcode Tags（4）Stack & Queue
			
    一.232. Implement Queue using Stacks private Stack<Integer> stack; /** Initialize your data str ...
    
			
    11.