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

我这个文章是介绍第二种情况,主要是要先了解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. JVM参数的配置及意义

    JVM参数设置.分析 因为在工作中遇到了JVM参数的配置,不明白,网上搜索发现一篇好文,转载至:https://www.cnblogs.com/redcreen/archive/2011/05/04/ ...

  2. 使用CDPATH快速cd到指定路径

    CDPATH是shell的一个环境变量, 默认值为空: 将你常用的目录添加到CDPATH的目录列表中, 用':'冒号分隔, 比如, 当前目录 ., home目录 ~, 根目录 /, 等等: # 注意等 ...

  3. 域渗透基础之Windows 2012创建域控制器

    创建备份域控制器 这里就拿windows 2012 R2来当备份域控 如果一个域内有多个域控制器,可以有如下好处. 提高用户登录的效率:如果同时有多台域控制器对客户提供服务,可以分担审核用户登录身份( ...

  4. Circle Problem From 3Blue1Brown (分圆问题)

    Background\text{Background}Background Last night, lots of students from primary school came to our c ...

  5. 3.1 C语言_实现AVL平衡二叉树

    [序] 上节我们实现了数据结构中最简单的Vector,那么来到第三章,我们需要实现一个Set set的特点是 内部有序且有唯一元素值:同时各种操作的期望操作时间复杂度在O(n·logn): 那么标准的 ...

  6. mac安装MongoDB教程

    目录 介绍 下载安装 方法1 方法2 配置 配置PATH 创建log和data目录 启动 关闭 介绍 基于分布式文件存储的数据库,使用C++编写. 应用最广泛的非关系型数据库(NoSQL). NoSQ ...

  7. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  8. Solr入门(一)

    一丶Solr入门1.Solr的启动Solr各版本下载老版本的时候,需要将war包放到tomcat中,现在只需解压,由于自带jetty容器,可以直接启动 [root@aaa bin]# ./solr s ...

  9. jupyter qtconsole 的安装

    Jupyter qtconsole最近开始研究人工智能算法,发现了一款基于python的科学计算的神器,jupyter qtconsole,简直就是ipython的加强版,每个命令都直接显示帮助信息, ...

  10. 用GitLab Runner自动部署GitBook并不难

    相信很多程序员喜欢用 GitBook 来写电子书.教程或者博客,看了不少文章,貌似都缺少说明如何将 GitBook 部署到版本库,并自动在服务器上 build,然后将生成的静态网站部署到云服务器上. ...