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 selenium单/复选框操作
一.单选:radio 1.首先是定位选择框的位置 2.定位id,点击图标就可以了,代码如下(获取url地址方法:把上面源码粘贴到文本保存为.html后缀后用浏览器打开,在浏览器url地址栏复制出地址就 ...
- 机器学习回顾篇(7):决策树算法(ID3、C4.5)
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...
- 代码审计-EasyCMS
cms来源AWD线下攻防平台题目. 链接:https://pan.baidu.com/s/1eUkyRspQmsv-0fIBby8ZlQ 提取码:tywa 失效可以联系我 0x01 文件上传漏 ...
- Dubbo+Zookeeper(一)Zookeeper初识
前面花了一段时间去学习SpringCloud的相关知识,主要是理解微服务的概念并使用SpringCloud的一系列组件实现微服务落地.学习这些组件本身是简单的,跟着操作一遍基本就会了,这也得益于Spr ...
- C# Halcon混合编程中遇到的问题(一)
目标平台 安装64位的halcon的情况下,目标平台必须使用x64而不能使用x86 目标框架 不能使用.Net Framework Client版本,有一些必须的程序集会缺失,测试使用.Net Fra ...
- shell数组(四)
[root@ipha-dev71- exercise_shell]# cat test.sh #!/bin/bash my_array=(a b c d) echo "第一个元素为:${my ...
- 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 ...
- Juc1024小半年总结-面试篇
大家好,我叫Juc 这大概是我时隔2年度多 第一次以分享的形式发的第一篇公众号 今天是2019年10月26 本想在10月24就分享一下 可惜前面两天时间太忙... 很凑巧,今天我出来工作刚好满4个月, ...
- 【java基础】- java双亲委派机制
在了解双亲委派机制之前,你应当知道classloader(如果不了解,可以现在去恶补一下哈) 四种classloader 虚拟机自带 引导类加载器(Bootstrap ClassLoader) 扩展类 ...
- python3.8安装flask出现错误“ModuleNotFoundError: No module named '_ctypes'”
本想在CentOS下配置flask+nginx+uwsgi环境,结果安装最基础的flask包都出了问题...以下是我的环境: 服务器:阿里云ECS CentOS7 python版本:3.8.0 问题描 ...