vue2.0實現(xiàn)移動端的輸入框?qū)崟r檢索更新列表功能
最近在做vue2.0的項目遇到一個移動端實時檢索搜索更新列表的效果，當用戶在搜索框輸入客戶的電話或姓名的時候，客戶列表內(nèi)容會做相應(yīng)的更新，下面給大家看下圖~·
html
<input type="text" id="getval" class="flex-1" @blur="serchhide" v-model="val" v-focus v-on:input ="inputFunc">
用v-on:input ="inputFunc" 來監(jiān)聽input框value內(nèi)容的變化，如果內(nèi)容更新會調(diào)用inputFunc函數(shù)~~
js：
在vue的method方法中寫下inpuFunc函數(shù)，獲取input框的value值然后傳給渲染客戶列表的這個函數(shù)queryData();
這里的第二個參數(shù)穿的false是因為queryData()會做一個數(shù)據(jù)請求，然后把匹配的數(shù)據(jù)在渲染出來，
這里面數(shù)據(jù)請求成功后，我們通過isConcat（是否拼接數(shù)組）參數(shù)控制，這個請求過來的數(shù)據(jù)是拼接在原來的customerlist數(shù)組內(nèi)還是直接替換customerlist數(shù)組里面的數(shù)據(jù)，
所以因為這個時候展示的數(shù)據(jù)是匹配出來的，所以需要替換數(shù)組里面的數(shù)據(jù)，所以這個時候函數(shù)的參數(shù)isConcat=false
備注：給你們簡略的看下這個客戶列表渲染的結(jié)構(gòu)，及數(shù)據(jù)結(jié)構(gòu)
結(jié)構(gòu)：
數(shù)據(jù)結(jié)構(gòu)：
這里rows是一個數(shù)組，所以把這個數(shù)據(jù)用js 里concat函數(shù)拼接數(shù)組 也就是拼接數(shù)據(jù)實現(xiàn)了這個新數(shù)據(jù)舊數(shù)據(jù)的合并。
總結(jié)
以上所述是小編給大家介紹的vue2.0 移動端的輸入框?qū)崟r檢索更新列表功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue3封裝類似京東商品詳情頁放大鏡效果組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了vue監(jiān)聽用戶輸入和點擊功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Vue 禁用瀏覽器的前進后退操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了ESLint 是如何檢查 .vue 文件的，幫助大家更好的理解和使用ESLINT，感興趣的朋友可以了解下2020-11-11
Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時,如果單文件上傳是比較簡單的,但是在實際需求中,往往會在上傳文件時伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧2023-08-08
這篇文章主要介紹了詳解如何用模塊化的方式寫vuejs，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了vue中rem的配置的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
基于Vue3和Plotly.js實現(xiàn)交互式3D圖
這篇文章主要介紹了基于Vue3和Plotly.js實現(xiàn)交互式3D圖,本代碼旨在為數(shù)據(jù)可視化提供一個交互式圖表,允許用戶動態(tài)控制圖表中線條的顏色和可見性,此功能對于探索大型數(shù)據(jù)集或突出特定數(shù)據(jù)子集非常有用,需要的朋友可以參考下2024-07-07
vue 組件中使用 transition 和 transition-group實現(xiàn)過渡動畫
本文給大家分享一下vue 組件中使用 transition 和 transition-group 設(shè)置過渡動畫,總結(jié)來說可分為分為 name 版, js 鉤子操作類名版, js 鉤子操作行內(nèi)樣式版，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-07-07
這篇文章主要介紹了Vue組件上使用v-model之單選框,代碼分為子組件內(nèi)容和父組件內(nèi)容，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10