vue:写一个数组box和list数组,在保留box数组中原有对象的同时,将list数组中每一个对象插入到box数组后面

前言:由于源码涉及到后端调用数据和一些无关的功能所以我就专门针对这个功能的代码,这样好方便理解。

1、在data中定义两个数组:box和list,并给它们初始化值

复制代码
data() {
  return {
    box: [/*初始的box数组对象*/],
    list: [/*初始的list数组对象*/]
  }
}

2、(重点)在mounted或者其他方法和适合的生命周期函数中,编写代码将list数组中每一个数组中的每一对象插入到box数组后面

复制代码
mounted() {
  this.list.forEach(item => {
    this.box.push(item);
  });
}

3、在页面中使用box数组展示所有对象。

复制代码
<template>
  <div>
    <ul>
      <li v-for="item in box" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

总结:通过遍历list数组中的每一个对象然后通过push插入到box数组的后面,在保留box数组中原有对象的同时,将list数组中每一个对象插入到box数组后面。

相关推荐
Electrolux20 分钟前
[onlyoffice-v9]纯前端怎么实现编辑预览office
前端·javascript·github
VidDown29 分钟前
Webhook 调试器:让第三方回调“原形毕露”
java·开发语言·javascript·编辑器·postman
San813_LDD30 分钟前
[数据结构]LeetCode学习
数据结构·算法·图论
kyriewen1 小时前
我读了一遍 Babel 编译后的 async/await,终于搞懂了它的原理(附 20 行手写实现)
前端·javascript·面试
小欣加油2 小时前
leetcode994 腐烂的橘子
数据结构·c++·算法·leetcode·bfs
Felven3 小时前
B. Fair Numbers
数据结构·算法
半岛@少年3 小时前
都是JS,CJS和ESM有什么区别?
javascript·esm·前端模块化·cjs
想吃火锅10053 小时前
【leetcode】165.比较版本号js
javascript·算法·leetcode
ysu_03143 小时前
leetcode数据结构与算法1~4
c语言·数据结构·学习·算法·leetcode
小欣加油3 小时前
leetcode2574 左右元素和的差值
数据结构·c++·算法·leetcode·职场和发展