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 相关文章推荐
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
input输入框内容实时监测(附代码)
Aug 15 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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 操作文件的一些FAQ总结
2009/02/12 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
javascript动态加载三
2012/08/22 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
js实现图片轮播效果
2015/12/19 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
Python itertools模块详解
2015/05/09 Python
Python实现数据库编程方法详解
2015/06/09 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
家长写给孩子的评语
2014/04/18 职场文书
商场租赁意向书
2014/07/30 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
2015年仓库工作总结
2015/04/09 职场文书
项目备案申请报告
2015/05/15 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB