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 的 v-model用法实例
Nov 23 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue如何清除浏览器历史栈
May 25 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 远程关机实现代码
2009/11/10 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
学习YUI.Ext 第三天
2007/03/10 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
TCP/IP的分层模型
2013/10/27 面试题
单位单身证明范本
2014/01/11 职场文书
股指期货心得体会
2014/09/10 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
CentOS MySql8 远程连接实战
2022/04/19 MySQL
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL