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
  }
})