vue 循环将某个数组中的某些值取出并组成一个新的对象,再将这个对象push到一个新的数组里面
时间: 2024-09-13 16:09:08 浏览: 58
在Vue中,你可以使用`v-for`指令来遍历数组,并在遍历的过程中根据条件选择性地将数组中的元素构造成一个新的对象,然后将这个对象添加到另一个数组中。以下是一个基本的示例代码:
```javascript
<template>
<div>
<ul>
<li v-for="item in finalArray" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
sourceArray: [
{ id: 1, name: 'Apple', type: 'fruit' },
{ id: 2, name: 'Carrot', type: 'vegetable' },
{ id: 3, name: 'Banana', type: 'fruit' },
// ... 其他元素
],
filteredObjectArray: []
};
},
mounted() {
this.sourceArray.forEach(item => {
if (item.type === 'fruit') { // 这里根据你的需求修改条件
this.filteredObjectArray.push({
id: item.id,
name: item.name
});
}
});
}
};
</script>
```
在这个例子中,`sourceArray`是我们原始的数据数组,我们在`mounted`生命周期钩子函数中遍历这个数组。如果数组元素满足特定条件(在这个例子中,元素的`type`属性为`'fruit'`),我们就创建一个新的对象,并将其添加到`filteredObjectArray`数组中。最后,`finalArray`会包含所有符合条件的对象,并可以在模板中通过`v-for`显示出来。
阅读全文