對于網頁開發者而言，列表是非常常見的元素，展示網頁內容的列表很多時候也是需要進行篩選和搜索的。而在Vue中，我們可以很方便地實現一個可篩選的列表。

首先，需要定義一個列表的組件，其基本結構如下：

<template>
<div>
<input v-model="searchText" type="text" placeholder="搜索">
<ul>
<li v-for="item in filteredList" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
originalList: [/* 原始數據 */],
searchText: '' // 搜索框的內容
};
},
computed: {
filteredList() {
// 根據搜索框的內容來篩選數據
return this.originalList.filter(item =>{
return item.name.indexOf(this.searchText) !== -1;
});
}
},
methods: {
// 其他方法
}
};
</script>

在這個組件中，我們通過定義一個 `originalList` 數組來存儲原始數據，并定義一個 `searchText` 字符串來存儲搜索框的內容。在 `filteredList` 計算屬性中，我們使用 `filter` 方法根據 `searchText` 來篩選原始數據，并將篩選出來的結果返回。在模板中，我們通過 `v-for` 指令來展示篩選結果列表。

接下來，在父組件中使用這個可篩選列表組件，我們需要將原始數據通過 `props` 屬性傳遞給子組件：

<template>
<div>
<searchable-list :original-list="list"></searchable-list>
</div>
</template>
<script>
import SearchableList from './SearchableList.vue';
export default {
components: {
SearchableList
},
data() {
return {
list: [/* 數據列表 */]
};
}
};
</script>

這樣，我們就可以通過 `originalList` 數據來獲取篩選后的數據，并將其展示在頁面上，實現了列表的可篩選功能。

當然，這個列表組件還可以進行擴展，比如添加排序、分頁等功能。總之，通過Vue的計算屬性和組件化思想，我們可以很方便地實現各種列表功能。