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>

以上两种方法都可以实现列表数据的过滤。具体使用哪种方法，可以根据实际情况选择。