处理后台传过来的数据无法使用问题

后台传来一个数据，这个数据要将前三个数据在一个容器里渲染，并且这个数据都在一个数组里，导致这个数据前端不可以使用，这个数据如图所示：

array: [88, 140, 36.2, 87, 150, 39.1, 88, 78, 38.9, 98, 77, 36.2, 92, 76, 36.3, 95, 78, 36.4]

要将此数据每三个放置到一个容器里，这个效果图如下所示：

 使用Vue来解决这个问题可以将这个数组每三个值合并为一个对象然后再对数组进行遍历，然后创建一个对象取其中三个为为一组每次增加三个来跳过每个组的前连个值，然后将此对象使用push方法将对象添加合并到数组中，最后返回合并后的数组就可以解决，话不多说上代码：

HTML代码：

<div id="app">
	<ul>
		<!-- 使用v-for指令遍历mergedArray数组，为每个对象创建一个li元素 -->
		<li v-for="(obj, index) in mergedArray" :key="index">
		    <!-- 显示每个对象的值 -->
		    <span class="value">{{ obj.value1 }}</span>
		    <span class="value">{{ obj.value2 }}</span>
		    <span class="value">{{ obj.value3 }}</span>
		</li>
    </ul>
</div>

Vue代码：

new Vue({
	el: '#app', // 将Vue实例挂载到id为'app'的元素上
	data() {
		return {
			// 初始数组，包含一组值
			array: [88, 140, 36.2, 87, 150, 39.1, 88, 78, 38.9, 98, 77, 36.2, 92, 76, 36.3, 95, 78, 36.4]
		};
	},
	computed: {
		mergedArray() {
			// 合并后的数组，每三个值合并为一个对象
			const merged = [];
			// 遍历初始数组，每次增加3来跳过每个组的前两个值
			for (let i = 0; i < this.array.length; i += 3) {
				// 创建一个对象，存储每个值
				const obj = {
					value1: this.array[i], // 第一个值
					value2: this.array[i + 1], // 第二个值
					value3: this.array[i + 2] // 第三个值
				};
				// 将对象添加到合并数组中
				merged.push(obj);
			}
			// 返回合并后的数组
			return merged;
		}
	}
});

最后效果图：