vue2.0实现移动端的输入框实时检索更新列表功能


Posted in Javascript onMay 08, 2018

最近在做vue2.0的项目遇到一个移动端实时检索搜索更新列表的效果,当用户在搜索框输入客户的电话或姓名的时候,客户列表内容会做相应的更新,下面给大家看下图~·

vue2.0实现移动端的输入框实时检索更新列表功能

html  

vue2.0实现移动端的输入框实时检索更新列表功能

<input type="text" id="getval" class="flex-1" @blur="serchhide" v-model="val" v-focus v-on:input ="inputFunc">

v-on:input ="inputFunc" 来监听input框value内容的变化,如果内容更新会调用inputFunc函数~~

 js:

vue2.0实现移动端的输入框实时检索更新列表功能

在vue的method方法中写下inpuFunc函数,获取input框的value值然后传给渲染客户列表的这个函数queryData();

这里的第二个参数穿的false是因为queryData()会做一个数据请求,然后把匹配的数据在渲染出来,

这里面数据请求成功后,我们通过isConcat(是否拼接数组)参数控制,这个请求过来的数据是拼接在原来的customerlist数组内还是直接替换customerlist数组里面的数据,

所以因为这个时候展示的数据是匹配出来的,所以需要替换数组里面的数据,所以这个时候函数的参数isConcat=false

vue2.0实现移动端的输入框实时检索更新列表功能

 备注:给你们简略的看下这个客户列表渲染的结构,及数据结构

结构:

vue2.0实现移动端的输入框实时检索更新列表功能

数据结构:

vue2.0实现移动端的输入框实时检索更新列表功能

vue2.0实现移动端的输入框实时检索更新列表功能

这里rows是一个数组,所以把这个数据用js 里concat函数拼接数组 也就是拼接数据实现了这个新数据旧数据的合并。

总结

以上所述是小编给大家介绍的vue2.0 移动端的输入框实时检索更新列表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中this的使用详解
Nov 08 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
webstorm添加*.vue文件支持
May 08 #Javascript
浅谈vue项目如何打包扔向服务器
May 08 #Javascript
Javascript实现购物车功能的详细代码
May 08 #Javascript
vue-cli 如何打包上线的方法示例
May 08 #Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 #Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 #Javascript
angularjs实现的购物金额计算工具示例
May 08 #Javascript
You might like
Laravel 5 框架入门(一)
2015/04/09 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
ext 代码生成器
2009/08/07 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
Python装饰器基础详解
2016/03/09 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
python numpy 反转 reverse示例
2019/12/04 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
庆祝教师节活动方案
2014/01/31 职场文书
办公设备采购方案
2014/03/16 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
环保建议书300字
2014/05/14 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
2014年应急工作总结
2014/12/11 职场文书
工作态度检讨书范文
2015/05/06 职场文书