在Vue 2中，我们仅使用|和即可方便地过滤项目filters。但是它不在Vue 3中。
众所周知，我们可以使用“计算”将值更改为另一个。
但是，如何更改数组的值？
查看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>
computed: {
filtered() {
return this.array1.map(item => `$${item}`);
}
}
如果您使用的是composition api：
setup() {
const array1 = ref([1,2,3,4,5]);
const filtered = computed(() => array1.value.map(item => `$${item}`));
return {
array1,
filtered
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句