如何在 Vue 3 中过滤项目？

Question

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

\n

正如我们所知\xef\xbc\x8c我们可以使用“计算”将一个值更改为另一个值。

\n

但是如何更改数组的值呢？

\n

视图2

\n

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

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

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 = reactive([1,2,3,4,5]);
  const filtered = computed(() => array1.map(item => `$${item}`));
  return {
    filtered
  }
}

Answer 2

如果您想将其设置为全局过滤器并使其可用于所有应用程序组件，请执行以下操作：

main.js

const app = createApp(App)

app.config.globalProperties.$filters = {
  valueFilter(value) {
    return '$' + value
  }
}

<template>
<ul>
  <li v-for="(index,value) in array1" :key="index">
   {{ $filters.valueFilter(value) }}
  </li>
</ul>
</template>