vue2.0 — 移动端的输入框实时检索更新列表
我们都是行走在这世界的孤独者
— 暖暖
最近在做vue2.0的项目遇到一个移动端实事检索搜索更新列表的效果,但用户在搜索框输入客户的电话或姓名的时候,客户列表内容会做相应的更新,下面给大家看下图~·
html
js:
在vue的method方法中写下inpuFunc函数,获取input框的值然后传给渲染客户列表的这个函数queryData();
queryData()会做一个数据请求,然后把匹配的数据在渲染出来,
这里面数据请求成功后,我们通过isConcat参数控制,这个请求过来的数据是拼接在原来的customerlist数组内还是直接替换customerlist数组里面的数据,
所以因为这个时候展示的数据是匹配出来的,所以需要替换数组里面的数据,调用函数的时候isConcat=false
备注:给你们简略的看下这个客户列表渲染的结构,及数据结构
结构:
数据结构:
这里rows是一个数组,所以把这个数据用js 里concat函数拼接数组 也就是拼接数据实现了这个新数据旧数据的合并。
结束语:个人感觉vue实现的思路还是更方便些的~~
vue2.0 — 移动端的输入框实时检索更新列表的更多相关文章
- vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版
在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://ww ...
- vue2.0移动端自定义性别选择提示框
这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来. 效果图: 实现代码: <template> <div c ...
- vue2.0 移动端,下拉刷新,上拉加载更多 插件
本人正在基于 vue2.0 + webpack + es6 搭建前端架构,整理了部分插件,下面这个是下拉更新 上拉更多的,挺好用的,分享给大家. 直接上代码,不懂的多看几遍,下面我换会告诉大家如何使用 ...
- vue2.0 移动端,下拉刷新,上拉加载更多 封装组件
前言 在做移动端的避免不了 下拉刷新,上拉加载 直接上代码吧,哈哈 组件里: <template lang="html"> <div class="yo ...
- 基于vue2.0的网易云音乐 (实时更新)
本人在自学vue,之后想在学习过程中加以实践.由于之前有做过jquery的播放器效果,ui仿照网易云,地址 www.daiwei.org/music 于是就想做vue 的网易云播放器,网上也有类似的项 ...
- vue2.0 移动端,下拉刷新,上拉加载更多插件 转:
转自:http://www.cnblogs.com/gmajip/p/7204072.html <template lang="html"> <div class ...
- 巧妙解决vue2.0关于set添加属性后视图不能更新的问题
今天在工作中遇到一个问题,郁闷了很久,特地写一篇博客记录一下,方便以后再遇到可以查找,也分享个各位小伙伴,在网上查找很多资料说用Vue.$set设置属性后视图也会更新,但是真相并不是这样,通过等于号赋 ...
- vue 项目使用局域网多端访问并实时自动更新(利用 browser-sync)
在写vue的项目中时,虽然vue会自动更新页面,但是切换页面切来切去也很麻烦,有时候我们还要在公司另一台电脑或者手机上调试,这时候利用browser-sync插件,无需改动vue的代码即可实现: 1. ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
随机推荐
- 北大青鸟Asp.net之颗粒归仓
自从小编走进编程的世界以来,学习的编程知识都是和C/S这个小伙伴握手,直到做完牛腩老师的新闻发布系统,才开始了小编的B/S学习生涯,和B/S初次谋面,小宇宙瞬间爆发了,看着自己的第一个B/S系统,牛腩 ...
- Mybatis源码之Statement处理器StatementHandler(一)
StatementHandler通过类名我们可以了解到它可能是Statement的处理器,它是一个接口,其实现类如下: BaseStatementHandler:一个抽象类,只是实现了一些不涉及具体操 ...
- 存储那些事儿(五):BTRFS文件系统之Btree结构详解
Btree数据结构可以说是BTRFS文件系统的基础.它提供了一个通用的方式去存储不同的数据类型.它仅仅存储3个数据类型:key, item和block header. btrfs_header的定义如 ...
- 在maven中开发Spring需要的jar依赖
在maven中开发Spring需要的jar依赖 <properties> <spring.version>4.0.6.RELEASE</spring.version> ...
- Libgdx1.6.2发布,跨平台游戏开发框架
原文地址:www.libgdx.cn [1.6.2] API更改:TiledMapImageLayer位置由整型改为浮点类型. API更改:添加GLFrameBuffer 和 FrameBufferC ...
- TCP的ACK确认系列 — 发送状态转换机
主要内容:TCP的ACK发送方式,以及ACK发送状态转换机的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 概述 TCP采用两种方式来发送ACK: ...
- Vi/Vim 替换使用方法
vi/vim 中可以使用 :s 命令来替换字符串.该命令有很多种不同细节使用方法,可以实现复杂的功能,记录几种在此,方便以后查询. :s/vivian/sky/ 替换当前行第一个 vivian 为 s ...
- Linux 学习笔记_12_Windows与Linux文件共享服务_1.1_--Samba(上)
Samba简介:在UNIX系统中,Samba是通过服务器消息块协议(SMB)在网络上的计算机之间,共享文件和打印服务的软件包. SMB简介:Server Message Block,SMB协议是一种服 ...
- Ext.Net_1.X_WINDOW遮罩层被GridPanel挡住
通过调试HTML代码,发现其实是DIV. chrome 中修改DIV Z:INDEX 就不被遮住了?但是又晓得如何修改window的Z:INDEX.那就修改"背景"GP的吧.
- RabbitMQ安装使用详解
1.下载相应的版本安装:http://www.rabbitmq.com/download.htmleg:http://www.rabbitmq.com/releases/rabbitmq-server ...