vue2计算属性从后端拿到九条数据需要三个为一组分为三组存储到data里
时间: 2023-06-18 16:02:35 浏览: 42
可以使用计算属性将从后端获取的九条数据分组并存储到data中。
首先,将从后端获取到的数据存储到一个名为`list`的数组中。然后,创建一个计算属性`groupedData`,在该属性中将`list`数组分为三组,每组包含三个元素,并将这三组存储到一个名为`grouped`的数组中。
代码示例:
```html
<template>
<div>
<!-- 显示分组后的数据 -->
<div v-for="(group, index) in grouped" :key="index">
<div v-for="item in group" :key="item.id">{{ item.name }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [], // 从后端获取到的数据
grouped: [] // 分组后的数据存储数组
};
},
computed: {
groupedData() {
const groups = [];
for (let i = 0; i < this.list.length; i += 3) {
groups.push(this.list.slice(i, i + 3));
}
this.grouped = groups;
return this.grouped;
}
},
mounted() {
// 从后端获取数据并存储到list数组中
// ...
}
};
</script>
```
在上面的示例中,我们使用了两个循环来显示分组后的数据。外层循环遍历`grouped`数组,内层循环遍历每个分组中的元素,并将其显示出来。