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 ...
随机推荐
- Mysql多数据库备份
备份数据脚本 #!/bin/bash # date是linux的一个命令 date [参数] [+格式] time=` date +%Y_%m_%d_%H_%M_%S ` # 备份输出路径 backu ...
- [NOIp2013] luogu P1970 花匠
scy居然开网了. 题目描述 你有一个序列 aaa,你需要保留尽量多的数,使得剩下的数满足以下条件中的一个: ∀x∈[2,n−1]∩N∗\forall x\in[2,n-1]∩\N^*∀x∈[2,n− ...
- sqlserver 查看最耗时的前10个存储过程
SELECT TOP OBJECT_NAME(a.object_id,database_id) SP_Name, DB_NAME(a.database_id) Database_Name, a.cac ...
- div设置contenteditable 的小技巧
div设置contenteditable="true",即可编辑,除从网页粘贴过来内容的格式 <div contenteditable="true" id ...
- 云计算 docker 容器使用命令
docker 使用命令: docker version 查看docker版本号 vi /etc/docker/daemon.json { "registry-mirrors": [ ...
- 03 python学习笔记-文件操作(三)
本文内容主要包括以下方面: 1. 文件操作基本认识2. 只读(r, rb)3. 只写(w, wb)4. 追加(a, ab)5. r+读写6. w+写读7. a+写读(追加写读)8. 文件的修改 一.文 ...
- 使用Apache common 的csv工具包处理csv文件
1.向csv文件中追加数据 //向文件中追加数据 BufferedWriter csvBufferedWriter = new BufferedWriter(new OutputStreamWrite ...
- vue与element ui的el-checkbox的坑
一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...
- WORKGROUP无法访问,您可能没有权限使用网络资源,请与这台服务器的管理员联系以....
解决方法 1.启用Guest账号 在很多情况下,为了本机系统的安全,Guest账户是被禁用的,这样就无法访问该机器的共享资源,因此必须启用Guest账户. 笔者以Windows XP系统为例进行介绍. ...
- Elasticsearch 知识点整理 一
极力推荐: 官网地址: https://www.elastic.co/guide/en/elasticsearch/reference/6.0 肺腑之言,学ES先学原生的语法,SpringData封装 ...