问题描述
在 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>
解决方法
使用计算预先过滤数据到您想要的方式，然后迭代计算而不是原始数据。
这本质上是过滤器会做的事情，但好处是使模板与组件中的逻辑更加清晰：
模板
<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,5]);
const filtered = computed(() => array1.value.map(item => `$${item}`));
return {
filtered
}
}
过滤器从 Vue 3.0 中移除，不再受支持
这是您可以在 Vue 3 中使用过滤器的方式
点击以下链接：