vue过滤数据的方法

在 Vue 中，可以使用计算属性或过滤器来进行列表数据的过滤。 1. 计算属性过滤： 在组件中定义一个计算属性，该属性返回过滤后的数据列表。可以使用 JavaScript 中的 filter() 方法对数据进行过滤。 例如： ``` <template> <ul> <li v-for="item in filteredList">{{ item }}</li> </ul> </template> <script> export default { data() { return { list: ['apple', 'banana', 'orange'], filterKey: '' } }, computed: { filteredList() { return this.list.filter(item => { return item.includes(this.filterKey) }) } } } </script> ``` 2. 过滤器过滤： 定义一个过滤器，该过滤器接收列表数据和过滤关键字作为参数，返回过滤后的数据列表。 例如： ``` <template> <ul> <li v-for="item in list | filterList(filterKey)">{{ item }}</li> </ul> </template> <script> export default { data() { return { list: ['apple', 'banana', 'orange'], filterKey: '' } }, filters: { filterList(list, filterKey) { return list.filter(item => { return item.includes(filterKey) }) } } } </script> ``` 以上两种方法都可以实现列表数据的过滤。具体使用哪种方法，可以根据实际情况选择。