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 相关文章推荐
jQuery 开发者应该注意的9个错误
May 03 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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获取金书网的书名的实现代码
2010/06/11 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
用Python写一个无界面的2048小游戏
2016/05/24 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
夜大自我鉴定
2013/10/31 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
市场营销计划书
2019/04/24 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
MySQL插入数据与查询数据
2022/03/25 MySQL
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers
Nginx反向代理、重定向
2022/04/13 Servers
Python读取和写入Excel数据
2022/04/20 Python
js判断两个数组相等的5种方法
2022/05/06 Javascript