vue3 列表数据过滤

在 Vue3 中，可以使用计算属性或者方法来进行列表数据的过滤。

1. 计算属性过滤：

在组件中定义一个计算属性，该属性返回过滤后的数据列表。可以使用 JavaScript 中的 filter() 方法对数据进行过滤。

例如：

<template>
  <ul>
    <li v-for="item in filteredList">{{ item }}</li>
  </ul>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const list = ref(['apple', 'banana', 'orange'])
    const filterKey = ref('')

    const filteredList = computed(() => {
      return list.value.filter(item => {
        return item.includes(filterKey.value)
      })
    })

    return {
      filteredList
    }
  }
}
</script>

2. 方法过滤：

定义一个方法，该方法接收列表数据和过滤关键字作为参数，返回过滤后的数据列表。

例如：

<template>
  <ul>
    <li v-for="item in getFilteredList(list, filterKey)">{{ item }}</li>
  </ul>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const list = ref(['apple', 'banana', 'orange'])
    const filterKey = ref('')

    const getFilteredList = (list, filterKey) => {
      return list.filter(item => {
        return item.includes(filterKey)
      })
    }

    return {
      list,
      filterKey,
      getFilteredList
    }
  }
}
</script>

以上两种方法都可以实现列表数据的过滤。具体使用哪种方法，可以根据实际情况选择。值得注意的是，在 Vue3 中使用计算属性时，需要使用 `computed` 函数来创建计算属性。而在 Vue3 中，使用方法时，需要在 `setup` 函数中定义方法，并将其作为组件实例的属性返回。