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