Vue 3 如何过滤项目？

Question

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

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

但是如何更改数组的值？

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>

Answer 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
  }
}

Answer 2

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

这是您在 Vue 3 中使用过滤器的方法

点击下面的link:

How to filter items in Vue 3？