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项目利用axios请求接口下载excel
Nov 17 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 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+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
一段实用的php验证码函数
2016/05/19 PHP
prototype 学习笔记整理
2009/07/17 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
Highcharts入门之简介
2016/08/02 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
js实现列表按字母排序
2020/08/11 Javascript
python实现telnet客户端的方法
2015/04/15 Python
Python中super关键字用法实例分析
2015/05/28 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
Python实现随机选择元素功能
2017/09/14 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
PHP面试题及答案二
2015/05/23 面试题
2015年教研室工作总结范文
2015/05/23 职场文书
三八节活动简报
2015/07/20 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
Mysql Show Profile
2021/04/05 MySQL
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL