如何过滤Vue 3中的项目？

mzsu5hc0 于 2023-02-16 发布在 Vue.js

关注(0)|答案(3)|浏览(149)

在Vue 2中，我们只需要使用|和filters就可以方便地过滤项目，但在Vue 3中却没有。
正如我们所知，我们可以使用"computed"将一个值更改为另一个值。
但是我怎样才能改变数组的值呢？

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

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

3条答案

使用计算的预先筛选数据以达到所需的效果，然后迭代计算的数据而不是原始数据。
这基本上就是过滤器所做的事情，再加上保持模板更干净的优点：

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

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

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

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

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

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>