Vue中如何使用foreach遍歷數(shù)組

本篇內(nèi)容介紹了“Vue中如何使用foreach遍歷數(shù)組”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

在js中遍歷數(shù)組

//定義班次詳細(xì)數(shù)組
  var bcglxiangxiList = new Array();
  //定義班次詳細(xì)對(duì)象
  var bcxiangxi  = {};
  //循環(huán)傳遞的參數(shù)
  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];
    //將班次詳細(xì)對(duì)象存進(jìn)班次詳細(xì)數(shù)組
    bcglxiangxiList.push(bcxiangxi);
  });

在vue中遍歷數(shù)組

 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中一樣可以用兩個(gè)參數(shù)的遍歷方式

  //定義班次詳細(xì)數(shù)組
  var bcglxiangxiList = new Array();
  //定義班次詳細(xì)對(duì)象
  var bcxiangxi  = {};
  //循環(huán)傳遞的參數(shù)
  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];
    //將班次詳細(xì)對(duì)象存進(jìn)班次詳細(xì)數(shù)組
    bcglxiangxiList.push(bcxiangxi);
  });

vue forEach循環(huán)使用

//data為集合 
data.forEach(function(item, index) {
            //item 就是當(dāng)日按循環(huán)到的對(duì)象
            //index是循環(huán)的索引，從0開始
})

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

“Vue中如何使用foreach遍歷數(shù)組”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！