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 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
vue响应式原理与双向数据的深入解析
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
You might like
菜鸟修复电子管记
2021/03/02 无线电
php的hash算法介绍
2014/02/13 PHP
PHP常用数组函数介绍
2014/07/28 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php微信开发接入
2016/08/27 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
python改变日志(logging)存放位置的示例
2014/03/27 Python
python中self原理实例分析
2015/04/30 Python
python requests 使用快速入门
2017/08/31 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
运动会解说词100字
2014/01/31 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
个人总结与自我评价
2015/02/14 职场文书
Django实现聊天机器人
2021/05/31 Python
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技