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数组后面。

相关推荐
TU不秃头4 小时前
JS逆向实战五:某海关公示平台分析(瑞数加密)
javascript·爬虫
Можно7 小时前
深入理解 ES6 Proxy:与 Object.defineProperty 的全面对比
前端·javascript·vue.js
问好眼7 小时前
《算法竞赛进阶指南》0x04 二分-1.最佳牛围栏
数据结构·c++·算法·二分·信息学奥赛
会编程的土豆8 小时前
【数据结构与算法】优先队列
数据结构·算法
天天向上10249 小时前
vue el-table实现拖拽排序
前端·javascript·vue.js
西西学代码9 小时前
Flutter---回调函数
开发语言·javascript·flutter
minji...9 小时前
Linux 进程信号(二)信号的保存,sigset_t,sigprocmask,sigpending
linux·运维·服务器·网络·数据结构·c++·算法
卷帘依旧9 小时前
JavaScript 闭包经典问题:为什么输出 10 次 i=10
javascript
罗湖老棍子10 小时前
最大数(信息学奥赛一本通- P1549)(洛谷-P1198)
数据结构·算法·线段树·单点修改 区间求最大值
柳杉10 小时前
Three.js × Blender:从建模到 Web 3D 的完整工作流深度解析
前端·javascript·数据可视化