使用计算属性
一种常见的列表过滤方式是使用计算属性。计算属性是Vue.js提供的一种便捷的属性，它根据已有的数据计算出一个新的属性，并将结果缓存起来，只在相关依赖发生改变时才重新计算。通过使用计算属性，可以根据特定的条件过滤列表数据。
下面是一个使用计算属性进行列表过滤的示例：
代码语言：javascript复制<div id="app">
<input type="text" v-model="filterText" placeholder="输入关键字">
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
],
filterText: ''
},
computed: {
filteredItems() {
return this.items.filter(item => item.name.toLowerCase().includes(this.filterText.toLowerCase()));
}
}
});在上面的示例中，我们使用一个文本输入框来接收用户输入的关键字，然后通过计算属性filteredItems来过滤列表数据。计算属性filteredItems使用filter方法对items数组进行过滤，只返回包含关键字的元素。在每次用户输入时，计算属性会根据新的过滤条件重新计算，从而实现动态的列表过滤。
使用方法
除了计算属性，我们还可以使用方法来实现列表过滤。方法是Vue.js组件中的一种函数，用于执行特定的操作。通过定义一个方法，在其中实现列表过滤的逻辑，我们可以根据需要在模板中调用该方法来实现过滤效果。
下面是一个使用方法进行列表过滤的示例：
代码语言：javascript复制<div id="app">
<input type="text" v-model="filterText" placeholder="输入关键字">
<ul>
<li v-for="item in filteredItems()" :key="item.id">{{ item.name }}</li>
</ul>
</div>new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
],
filterText: ''
},
methods: {
filteredItems() {
return this.items.filter(item => item.name.toLowerCase().includes(this.filterText.toLowerCase()));
}
}
});在上面的示例中，我们定义了一个名为filteredItems的方法，该方法实现了列表的过滤逻辑。在模板中，我们通过调用该方法来实现动态的列表过滤效果。
使用过滤器
Vue.js还提供了一种特殊的功能，即过滤器。过滤器可以用于在模板中对文本进行格式化，例如对日期进行格式化、对文本进行大小写转换等。在列表渲染中，我们也可以使用过滤器来对列表进行过滤操作。
下面是一个使用过滤器进行列表过滤的示例：
代码语言：javascript复制<div id="app">
<input type="text" v-model="filterText" placeholder="输入关键字">
<ul>
<li v-for="item in items" :key="item.id" v-if="item.name | filterBy(filterText)">{{ item.name }}</li>
</ul>
</div>new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
],
filterText: ''
},
filters: {
filterBy(value, keyword) {
return value.toLowerCase().includes(keyword.toLowerCase());
}
}
});在上面的示例中，我们定义了一个名为filterBy的过滤器，该过滤器实现了列表的过滤逻辑。在模板中，我们使用v-if指令来根据过滤器的结果决定是否显示列表项。
