Vue filterable 是一個 Vue.js 插件，它提供了一種簡單而強(qiáng)大的方法來過濾任何 Vue 列表。

import Vue from 'vue'
import Filterable from 'vue-filterable'
Vue.use(Filterable)

使用 Vue filterable，你可以輕松地為任何可枚舉的數(shù)據(jù)列表創(chuàng)建過濾器。

<template>
<div>
<input v-model="search" placeholder="Search">
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
search: '',
items: [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' },
{ id: 3, name: 'Bob Johnson' },
{ id: 4, name: 'Amy Johnson' },
]
}
},
computed: {
filteredItems() {
return this.items.filter(item =>item.name.toLowerCase().includes(this.search.toLowerCase()));
},
},
}
</script>

如上代碼所示，在Vue組件中使用 Vue filterable，只需引入該模塊并在Vue實(shí)例中使用Vue.use(Filterable)即可啟用。

在模板中，你需要一個包含在input綁定search變量，然后根據(jù)過濾后的結(jié)果循環(huán)items顯示結(jié)果，由computed計算屬性 filteredItems 對items列表進(jìn)行過濾。

filteredItems使用ES6的Array.filter方法過濾items數(shù)組，取出所有滿足條件（字符串search在item.name中出現(xiàn)）的對象，并返回一個新的數(shù)組。最后返回這個數(shù)組供顯示。

Vue filterable 是使用簡單、靈活的 Vue 插件，它可以輕松地滿足你的列表過濾需求。無論你是處理小型列表還是大型數(shù)據(jù)集，Vue filterable都能為你提供強(qiáng)大的過濾功能。