vue.js (內置數組篩選器)

數組過濾器

Vue有兩個內置的過濾器來過濾或者排序數據，分別是： filterBy 和 orderBy 。

filterBy

語法：

filterBy searchKey [in dataKey...] 

返回原數組過濾后的結果。 searchKey 參數是當前 ViewModel 的一個屬性名，這個屬性的值會被用作查找的目標。

in 關鍵字指定具體要在哪個屬性中進行查找。

用法：

1.不使用 in 關鍵字

<input v-model="searchText"> <ul> <li v-repeat="users | filterBy searchText"></li> </ul> 

這個過濾器會遍歷整個users數組每個元素的 每個 屬性值來匹配 searchText 的內容

比如如果一個元素為 {name:'趙宏軒',tel:'021-111111'} , searchText 的值為 021 ,那么這條數據就是合法的數據，不會被過濾器過濾掉。

2.使用 in 關鍵字

<input v-model="searchText"> <ul> <li v-repeat="user in users | filterBy searchText in 'name'"></li> </ul> 

和上一個例子數據一樣，但是如果 searchText 的值還是 021 的話，那么這條數據就會被過濾掉。因為過濾的內容限定在 name 屬性中，如果

searchText 的值為 趙 的話，這個元素就不會被過濾掉。

OrderBy

語法： orderBy sortKey [reverseKey]. 

orderBy 用於返回原數組排序后的結果。

sortKey 參數是當前 ViewModel 的一個屬性名。這個屬性的值表示用來排序的鍵名.

reverseKey 參數也是當前 ViewModel 的一個屬性名，如果這個屬性值為真則數組會被倒序排列。

可以使用引號來表示字面量的排序鍵名。使用 -1 來表示字面量的 reverse 參數。

語法： orderBy sortKey [reverseKey]. 

用法：

<ul> <li v-repeat="user in users | orderBy field reverse"></li> </ul> 

new Vue({ /* ... */ data: { field: 'name', reverse: false } })