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中使用mockjs代码实例
Nov 25 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
vue响应式原理与双向数据的深入解析
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
You might like
在普通HTTP上安全地传输密码
2007/07/21 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
php集成动态口令认证
2016/07/21 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
vue组件学习教程
2017/09/09 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
Python Web服务器Tornado使用小结
2014/05/06 Python
Django自定义用户认证示例详解
2018/03/14 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python读取Excel实例详解
2018/08/17 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
自考生毕业自我鉴定
2013/10/10 职场文书
岗位职责说明书
2014/05/07 职场文书
另类冲刺标语
2014/06/24 职场文书
观看信仰心得体会
2014/09/04 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android