vue2.0 — 移動端的輸入框實時檢索更新列表（一）

我們都是行走在這世界的孤獨者

                          　　　　　　　　　　　　　　　　  — 暖暖

 

---

 

最近在做vue2.0的項目遇到一個移動端實時檢索搜索更新列表的效果，當用戶在搜索框輸入客戶的電話或姓名的時候，客戶列表內容會做相應的更新，下面給大家看下圖~·

html   

<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函數拼接數組 也就是拼接數據實現了這個新數據舊數據的合並。

結束語：個人感覺vue實現的思路還是更方便些的~~