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 相关文章推荐
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
详解JavaScript中的链式调用
Nov 27 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
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
jquery form 加载数据示例
2014/04/21 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
js实现文字截断功能
2016/09/14 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
Python深入学习之闭包
2014/08/31 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
Python实现多进程的四种方式
2019/02/22 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
工商管理专业职业生涯规划
2014/01/01 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
2014年人事科工作总结
2014/11/19 职场文书
优秀班组事迹材料
2014/12/24 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
会议主持词通用版
2019/04/02 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS