Vue 3 如何过滤项目？

Question

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

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

但是我怎样才能改变数组的值呢？

视图 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>

原文由 radiorz 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Dan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

点击以下链接：

https://v3-migration.vuejs.org/breaking-changes/filters.html

原文由 Imran_Developer 发布，翻译遵循 CC BY-SA 4.0 许可协议