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

我这个文章是介绍第二种情况,主要是要先了解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. C语言打印当前所在函数名、文件名、行号

    printf("[%s %s] %s: %s: %d\n", \ __DATE__, __TIME__, __FILE__, __func__, __LINE__); 内核驱动中: ...

  2. Qt5教程: (4) 带参数信号与槽

    在subwidget.h中声明一个signal. 和之前的信号函数重名但是有参数: void backSignal(QString); 之后在subwidget.cpp的槽函数sendSignal() ...

  3. [JZOJ5456]【NOIP2017提高A组冲刺11.6】奇怪的队列

    Description nodgd的粉丝太多了,每天都会有很多人排队要签名.今天有

  4. Cocos2d-x 学习笔记(11.4) ScaleTo ScaleBy

    1. ScaleTo ScaleBy 对node进行缩放.ScaleBy是ScaleTo的子类. 1.1 成员变量 create方法 ScaleTo ScaleBy 成员变量一样: float _sc ...

  5. Android 使用appcompat_v7包以及源码注意事项

    最近学习和实践Android,无数次被AS和gradle惨痛的折磨,于是决定坚守Eclipse阵地..真是无奈之举,AS和gradle对我而言就像win10一样不讨喜. 当然Eclipse中开发and ...

  6. Kubernetes WebSSH终端窗口自适应Resize

    追求完美不服输的我,一直在与各种问题斗争的路上痛并快乐着 上一篇文章Django实现WebSSH操作Kubernetes Pod最后留了个问题没有解决,那就是terminal内容窗口的大小没有办法调整 ...

  7. spark运行java-jar:Exception in thread "main" java.io.IOException: No FileSystem for scheme: hdfs

    今天碰到的一个 spark问题,困扰好久才解决 首先我的spark集群部署使用的部署包是官方提供的 spark-1.0.2-bin-hadoop2.tgz 部署在hadoop集群上. 在运行java ...

  8. 我遇到的一些Git问题汇编

    问题一: failed to push some refs to git hint: Updates were rejected because the remote contains work th ...

  9. LeetCode 5024 除数博弈 --(简单博弈论)

    今天在LeetCode的看到一到题目 这道题目有点坑,没有思路的话容易钻牛角. 刚刚开始时,我想的是直接用while循环来模拟计算,后来觉得这么好麻烦,也有复制的逻辑在里面.后面我推导了一下 以下是我 ...

  10. .net core跨平台应用研究-ubuntu core下配置.net core运行时

    引言 年初研究了一阵子.net core跨平台应用,先后发表了几篇应用研究的文章.因工作原因,忙于项目上线,有一阵子没来博客园写文章了.最近项目基本收尾,抽空翻了下自己的博客,廖廖几篇文章,真让人汗颜 ...