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+iview分页组件的封装
Nov 17 Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
Vue Element plus使用方法梳理
Dec 24 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 sprintf()函数用例解析
2011/05/18 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Python字符串格式化输出代码实例
2019/11/22 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
python字典key不能是可以是啥类型
2020/08/04 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
办公室经理岗位职责
2014/01/01 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
写自荐信的注意事项
2014/03/09 职场文书
5.12护士节活动总结
2015/02/10 职场文书
大学生社会实践感想
2015/08/11 职场文书
如何撰写促销方案?
2019/07/05 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
mysql全面解析json/数组
2022/07/07 MySQL