根據組件的業務需要，有時候搜索是把關鍵字返回給後臺，後臺處理後再把數據返回給前端渲染（多次請求服務器）；有時候是前端把頁面的數據全部獲取下來，前端處理關鍵字的搜索（影響頁面加載）

我這個文章是介紹第二種情況，主要是要先了解es6的filter（）和includes（）

filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。不會對空數組進行檢測。不會改變原始數組。

array.filter(function(currentValue,index,arr), thisValue)
可以點擊了解http://www.runoob.com/jsref/jsref-filter.html
實例：https://blog.csdn.net/bossxu_/article/details/80756563

 

includes() 方法用來判斷一個數組或字符串是否包含一個指定的值，如果是返回 true，否則false

可以點擊了解http://www.runoob.com/jsref/jsref-filter.html

哈哈哈知道這兩個函數後就很簡單了

1.搜索欄

2.搜索出對應的列表（class的命名不要學不要用下劃線）

3，在watch中監聽（this.allOptions是你已經從後臺獲取到所有數據存儲起來的）

vue 前端處理監聽關鍵字搜索