Vue中foreach数组与js中遍历数组的写法说明


Posted in Vue.js onJune 05, 2021

Vue foreach数组与js中遍历数组的写法

场景

Vue中使用Axios发送get或者post请求,发送请求时需要在js中

对请求参数进行遍历并处理。

接收响应时需要对响应结果进行遍历和处理。

注意区分在vue和js中foreach数组的区别。

实现

在js中遍历数组

//定义班次详细数组
  var bcglxiangxiList = new Array();
  //定义班次详细对象
  var bcxiangxi  = {};
  //循环传递的参数
  bcglXiangXiListParam.forEach(element => {
    bcxiangxi.xh = element.xh;
    bcxiangxi.bcbh = data.bcbh;
    bcxiangxi.dkkssj = element.sjfw[0];
    bcxiangxi.dkjssj = element.sjfw[1];
    bcxiangxi.ts = element.ts;
    bcxiangxi.dkdd = element.dkdd;
    bcxiangxi.zxjxljsj = element.jxsjfw[0];
    bcxiangxi.zdjxljsj = element.jxsjfw[1];
    //将班次详细对象存进班次详细数组
    bcglxiangxiList.push(bcxiangxi);
  });

在vue中遍历数组

var bcglxiangxiList = new Array();
        var bcxiangxi = {};
        debugger;
        if (
          response.data.bcglXiangXiList != null &&
          response.data.bcglXiangXiList.length > 0
        ) {
          console.log(response.data.bcglXiangXiList);
          response.data.bcglXiangXiList.forEach((item, index) => {
            console.log(item);
            bcxiangxi.xh = item.xh;
            bcxiangxi.bcbh = item.bcbh;
            //debugger
            bcxiangxi.sjfw = new Array();
            bcxiangxi.sjfw[0] = item.dkkssj;
            bcxiangxi.sjfw[1] = item.dkjssj;
            bcxiangxi.ts = item.ts;
            bcxiangxi.dkdd = item.dkdd;
            bcxiangxi.jxsjfw = new Array();
            bcxiangxi.jxsjfw[0] = item.zxjxljsj;
            bcxiangxi.jxsjfw[1] = item.zdjxljsj;
            bcglxiangxiList.push(bcxiangxi);
          });
        }

可以看到遍历的方式是一样的,在js中一样可以用两个参数的遍历方式

//定义班次详细数组
  var bcglxiangxiList = new Array();
  //定义班次详细对象
  var bcxiangxi  = {};
  //循环传递的参数
  bcglXiangXiListParam.forEach((element,index) => {
    bcxiangxi.xh = element.xh;
    bcxiangxi.bcbh = data.bcbh;
    bcxiangxi.dkkssj = element.sjfw[0];
    bcxiangxi.dkjssj = element.sjfw[1];
    bcxiangxi.ts = element.ts;
    bcxiangxi.dkdd = element.dkdd;
    bcxiangxi.zxjxljsj = element.jxsjfw[0];
    bcxiangxi.zdjxljsj = element.jxsjfw[1];
    //将班次详细对象存进班次详细数组
    bcglxiangxiList.push(bcxiangxi);
  });

vue forEach循环使用

//data为集合 
data.forEach(function(item, index) {
            //item 就是当日按循环到的对象
            //index是循环的索引,从0开始
})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
vue响应式原理与双向数据的深入解析
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
You might like
php配合jquery实现增删操作具体实例
2013/12/12 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
Django中FilePathField字段的用法
2020/05/21 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
草莓网官网:StrawberryNET
2019/08/21 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
前台文员岗位职责及工作流程
2013/11/19 职场文书
村抢险救灾方案
2014/05/09 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
linux中nohup和后台运行进程查看及终止
2021/06/24 Python