最近在做 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:
在 vue 的 method 方法中写下 inpuFunc 函数, 获取 input 框的 value 值然后传给渲染客户列表的这个函数 queryData();
这里的第二个参数穿的 false 是因为 queryData() 会做一个数据请求, 然后把匹配的数据在渲染出来,
这里面数据请求成功后, 我们通过 isConcat(是否拼接数组) 参数控制, 这个请求过来的数据是拼接在原来的 customerlist 数组内还是直接替换 customerlist 数组里面的数据,
所以因为这个时候展示的数据是匹配出来的, 所以需要替换数组里面的数据, 所以这个时候函数的参数 isConcat=false
备注: 给你们简略的看下这个客户列表渲染的结构, 及数据结构
结构:
数据结构:
这里 rows 是一个数组, 所以把这个数据用 js 里 concat 函数拼接数组 也就是拼接数据实现了这个新数据旧数据的合并.
总结
以上所述是小编给大家介绍的 vue2.0 移动端的输入框实时检索更新列表功能, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/139695.htm