vue 前端处理监听关键字搜索
根据组件的业务需要,有时候搜索是把关键字返回给后台,后台处理后再把数据返回给前端渲染(多次请求服务器);有时候是前端把页面的数据全部获取下来,前端处理关键字的搜索(影响页面加载)
我这个文章是介绍第二种情况,主要是要先了解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 前端处理监听关键字搜索的更多相关文章
- vue mounted中监听div的变化
vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...
- Vue之数据监听存在的问题
Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...
- Vue的watch监听事件
Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue watch 深层监听
Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...
- Vue之watch监听对象中某个属性的方法
新建 userinfo = { name: "小明", age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...
- vue 使用watch监听实现类似百度搜索功能
watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...
- 009——VUE中watch监听属性变化实现类百度搜索栏功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue项目如何监听窗口变化,达到页面自适应?
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
- Vue使用watch监听一个对象中的属性
问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedSta ...
随机推荐
- Python_函数传参
关于函数中传递参数的相关知识 其中 万能参数 第一次听说 但感觉用处不大 后面用到再详细整理
- Java 8 Optional:优雅地避免 NPE
本篇文章将详细介绍 Optional 类,以及如何用它消除代码中的 null 检查.在开始之前首先来看下什么是 NPE,以及在 Java 8 之前是如何处理 NPE 问题的. 空指针异常(NullPo ...
- 什么是IDS/IPS?
目录 摘要 0x00 基于网络的IDS和IPS0x01 设计考虑因素0X02 IDS/IPS 总结 摘要 摘要 这篇文章主要介绍的是入侵检测系统(IDS)和入侵防御系统(IPS ...
- PMP(第六版)中的控制账户、规划包、工作包
PMP(第六版)中的控制账户.规划包.工作包 控制账户是一个管理控制点,在该控制点上,把范围.预算和进度加以整合,并与挣值比较,以测量绩效.控制账户拥有2个或以上的工作包,但每个工作包只与一个控制账户 ...
- Cocos2d-x 学习笔记(3.3) Layer
1.简介 Layer直接继承了Node.Layer类似Ps里图层的概念,也可以理解成一块透明玻璃.Scene类似Ps里的一张图像,也可以理解成堆放玻璃的箱子. Layer能接收触摸事件.键盘事件.加速 ...
- opencv::处理边缘
卷积边界问题 图像卷积的时候边界像素,不能被卷积操作,原因在于边界像素没有完全跟kernel重叠,所以当3x3滤波时候有1个像素的边缘没有被处理,5x5滤波的时候有2个像素的边缘没有被处理. 处理边缘 ...
- C# 求Π Π/4=1-1/3+1/5-1/7+......+1/(2*n-3)-1/(2*n-1); (n=2000)
double a = 0.0;//最终Π的结果 double类型 int n; for (n = 1; n <= 2000; n++) { if (n % 2 == 1) { a += 1.0 ...
- ESP32 开发之旅② Arduino For ESP32说明
授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...
- ESP32 开发之旅① 走进ESP32的世界 安装开发环境
1.前言 欢迎大家来到ESP32的世界,从现在开始,笔者将带领大家慢慢揭开ESP32神秘的面纱. 在学习ESP32之前,博主希望读者能有ESP8266的学习基础(ESP32 Wifi模 ...
- 微软宣布加入 OpenJDK,看网上各派的热闹
微软宣布加入 OpenJDK 项目(https://www.oschina.net/news/111036/microsoft-to-participate-in-openidk),这两天在微信公众号 ...