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 输入框内容格式验证代码
Feb 11 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
javascript的push使用指南
Dec 05 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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
天津市收音机工业发展史
2021/03/04 无线电
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
jquery简单体验
2007/01/10 Javascript
jquery radio 操作代码
2011/03/16 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python中的choice()方法使用详解
2015/05/15 Python
理论讲解python多进程并发编程
2018/02/09 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
Opencv求取连通区域重心实例
2020/06/04 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
公司会计主管岗位责任制
2014/03/01 职场文书
消防工作实施方案
2014/06/09 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书