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

我这个文章是介绍第二种情况,主要是要先了解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. Vue之数据监听存在的问题

    Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...

  3. Vue的watch监听事件

    Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  4. Vue watch 深层监听

    Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...

  5. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  6. vue 使用watch监听实现类似百度搜索功能

    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...

  7. 009——VUE中watch监听属性变化实现类百度搜索栏功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. vue项目如何监听窗口变化,达到页面自适应?

    [自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...

  9. Vue使用watch监听一个对象中的属性

    问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedSta ...

随机推荐

  1. django-drf框架自带的路由以及最简化的视图

    0910自我总结 django-drf框架自带的路由以及最简化的视图 路由 一.导入模块 from rest_framework.routers import SimpleRouter 二.初始化路由 ...

  2. 零基础转行web前端,如何高效的去学习web前端

    web前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML.CSS和JavaScript这些基础知识点,但学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而且互联网时代不 ...

  3. 实验吧之【who are you?】(时间盲注)补充

    第二种方法 使用brup进行盲注  也是一个道理 不多贴了 这里提一下  burp怎么判断超时 Options->Connections->Tiimeouts->Normal这一空 ...

  4. Python之selenium+pytesseract 实现识别验证码自动化登录脚本

    今天写自己的爆破靶场WP时候,遇到有验证码的网站除了使用pkav的工具我们同样可以通过py强大的第三方库来实现识别验证码+后台登录爆破,这里做个笔记~~~ 0x01关于selenium seleniu ...

  5. 微信小程序尺寸单位rpx以及样式相关介绍

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375p ...

  6. 《Java并发编程实战》读书笔记-第1章 简介

    并发简史 在早期的计算机中不包含操作系统,从头至尾都只执行一个程序,并且这个程序能访问计算机所有资源.操作系统的出现使得计算机每次能运行多个程序,并且不同的程序都在单独的进程中运行:操作系统为各个独立 ...

  7. 将JSON反序列化为指定的.NET类型

    前言: 关于将JSON格式数据反序列化为指定的.NET类型数据常见的场景就是,关于网络请求获取请求成功的响应数据.本篇主要讲的的是如何通过使用Newtonsoft.Json中的JsonConvert. ...

  8. Ubuntu18.04 安装谷歌BBR

    说明:Ubuntu 18.04前几天发布了,改变挺大的,内核也直接升到了正式版4.15,而BBR内核要求为4.9,也就是说满足了,所以我们不需要换内核就可以很快的开启BBR,这里简单说下方法. 提示: ...

  9. OptimalSolution(9)--其他问题(1)

    一.从5随机到7及其扩展 题目1:给定一个等概率随机产生1~5的随机函数rand1to5: public int rand1To5() { return (int)(Math.random() * 5 ...

  10. 修改linux系统history命令的条数和格式

    在一次测试环境遇到的情况,发现服务莫名其妙挂了,以为服务有bug,查了一下午,后来一个同事说,是我把服务关了啊.... 是可忍孰不可忍,原生的history命令,只能看到输入的命令历史,看不到什么时候 ...