如何在 Vue 3 中过滤项目？答案

【问题标题】：How to filter items in Vue 3？如何在 Vue 3 中过滤项目？
【发布时间】：2021-02-18 15:59:12
【问题描述】：

在 Vue 2 中，我们仅使用 | 和 filters 即可方便地过滤项目。但它不在 Vue 3 中。

正如我们所知，我们可以只使用“计算”将一个值更改为另一个值。

但是如何更改数组的值？

Vue 2

<template>
<ul>
  <li v-for="(index,value) in array1" :key="index">
   {{ value | valuefilter}}
  </li>
</ul>
</template>

<script>
...
export {
...
  filters:{
    valuefilter(value){
      return '$'+ value
    }
  }
...
}
</script>

【问题讨论】：

【解决方案1】：

使用计算来预先过滤数据以按照您想要的方式，然后迭代计算而不是原始数据。

这本质上是过滤器的作用，但其优点是使模板与组件中的逻辑更清晰：

模板

<ul>
  <li v-for="(value, index) in filtered" :key="index">
   {{ value }}
  </li>
</ul>

选项 API

data: () => ({
  array1: [1,2,3,4,5]
}),
computed: {
  filtered() {
    return this.array1.map(item => `$${item}`);
  }
}

组合 API

setup() {
  const array1 = ref([1,2,3,4,5]);
  const filtered = computed(() => array1.value.map(item => `$${item}`));
  return {
    filtered
  }
}

【讨论】：

【解决方案2】：

过滤器已从 Vue 3.0 中移除，不再受支持

这是您可以在 Vue 3 中使用过滤器的方式

点击下面的链接：

【讨论】：