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-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 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分页的功能模块
2015/06/16 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
详解Python中类的定义与使用
2017/04/11 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
CSS3 实现的加载动画
2020/12/07 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
三年大学生活自我鉴定
2014/01/21 职场文书
财务会计自荐信范文
2014/02/21 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers