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中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
详解Vue router路由
Nov 20 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 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中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
php 常用的系统函数
2017/02/07 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
Vue中"This dependency was not found"问题的解决方法
2018/06/19 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
PyMongo安装使用笔记
2015/04/27 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
对Python3 序列解包详解
2019/02/16 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
毕业生如何写自我鉴定
2014/03/15 职场文书
小区文明倡议书
2014/05/16 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
律政俏佳人观后感
2015/06/09 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
Python实现的扫码工具居然这么好用!
2021/06/07 Python