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中利用three.js实现全景图的完整示例
Dec 07 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
vue实现登陆页面开发实践
May 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
用Php实现链结人气统计
2006/10/09 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
微信小程序页面生命周期详解
2018/01/31 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
Python中property函数用法实例分析
2018/06/04 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
公务员总结性个人自我评价
2013/12/05 职场文书
高中毕业生生活的自我评价
2013/12/08 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
物业保安员岗位职责
2014/03/14 职场文书
仓库规划计划书
2014/04/28 职场文书
人代会标语
2014/06/30 职场文书
新教师个人工作总结
2015/02/06 职场文书
消防宣传标语大全
2015/08/03 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
怎么用Python识别手势数字
2021/06/07 Python
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript