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" 來監(jiān)聽input框value內(nèi)容的變化，如果內(nèi)容更新會(huì)調(diào)用inputFunc函數(shù)~~
js：
在vue的method方法中寫下inpuFunc函數(shù)，獲取input框的value值然后傳給渲染客戶列表的這個(gè)函數(shù)queryData();
這里的第二個(gè)參數(shù)穿的false是因?yàn)閝ueryData()會(huì)做一個(gè)數(shù)據(jù)請(qǐng)求，然后把匹配的數(shù)據(jù)在渲染出來，
這里面數(shù)據(jù)請(qǐng)求成功后，我們通過isConcat（是否拼接數(shù)組）參數(shù)控制，這個(gè)請(qǐng)求過來的數(shù)據(jù)是拼接在原來的customerlist數(shù)組內(nèi)還是直接替換customerlist數(shù)組里面的數(shù)據(jù)，
所以因?yàn)檫@個(gè)時(shí)候展示的數(shù)據(jù)是匹配出來的，所以需要替換數(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
今天小編就為大家分享一篇vue移動(dòng)端彈框組件的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue如何通過事件的形式調(diào)用全局組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
vue不用import直接調(diào)用實(shí)現(xiàn)接口api文件封裝
這篇文章主要為大家介紹了vue不用import直接調(diào)用實(shí)現(xiàn)接口api文件封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
今天小編就為大家分享一篇在vue中讀取本地Json文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
當(dāng)頁(yè)面刷新時(shí),Vuex?的?state?數(shù)據(jù)會(huì)丟失,這是因?yàn)?Vuex?的狀態(tài)存儲(chǔ)在內(nèi)存中,刷新瀏覽器會(huì)重置?JavaScript?的運(yùn)行環(huán)境,下面我將詳細(xì)介紹幾種解決方案,從簡(jiǎn)單到復(fù)雜,幫助你根據(jù)項(xiàng)目需求選擇最適合的方法,需要的朋友可以參考下2025-04-04
vue轉(zhuǎn)react useEffect的全過程
這篇文章主要介紹了vue轉(zhuǎn)react useEffect的全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue項(xiàng)目中實(shí)現(xiàn)AES加密解密的全過程
AES算法是一種對(duì)稱加密算法,用于加密和解密數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中實(shí)現(xiàn)AES加密解密的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
路由是可以傳遞參數(shù)的，一般使用query進(jìn)行傳參，有兩種方式，本溫酒通過代碼示例給大家介紹這兩種傳遞方式，感興趣的小伙伴可以參考閱讀2023-06-06
VUE使用localstorage和sessionstorage實(shí)現(xiàn)登錄示例詳解
這篇文章主要為大家介紹了VUE使用localstorage和sessionstorage實(shí)現(xiàn)登錄示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了vue使用exif獲取圖片經(jīng)緯度的示例代碼，幫助大家更好的利用vue獲取圖片信息，感興趣的朋友可以了解下2020-12-12