Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明
更新時間：2021年06月04日 16:23:26 作者：霸道流氓
這篇文章主要介紹了Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue foreach數(shù)組與js中遍歷數(shù)組的寫法
場景
Vue中使用Axios發(fā)送get或者post請求，發(fā)送請求時需要在js中
對請求參數(shù)進行遍歷并處理。
接收響應(yīng)時需要對響應(yīng)結(jié)果進行遍歷和處理。
注意區(qū)分在vue和js中foreach數(shù)組的區(qū)別。
實現(xiàn)
在js中遍歷數(shù)組
//定義班次詳細數(shù)組
var bcglxiangxiList = new Array();
//定義班次詳細對象
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];
//將班次詳細對象存進班次詳細數(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中一樣可以用兩個參數(shù)的遍歷方式
//定義班次詳細數(shù)組
var bcglxiangxiList = new Array();
//定義班次詳細對象
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];
//將班次詳細對象存進班次詳細數(shù)組
bcglxiangxiList.push(bcxiangxi);
});
vue forEach循環(huán)使用
//data為集合
data.forEach(function(item, index) {
//item 就是當(dāng)日按循環(huán)到的對象
//index是循環(huán)的索引，從0開始
})
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于webpack4+vue-cli3項目實現(xiàn)換膚功能
這篇文章主要介紹了基于webpack4+vue-cli3項目的換膚功能,文中是通過scss+style-loader/useable做換膚功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Element Alert警告的具體使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要給大家介紹了關(guān)于vue如何實現(xiàn)pc和移動端布局的相關(guān)資料, Vue響應(yīng)式布局適配是一種根據(jù)設(shè)備特性自動調(diào)整布局的方法,文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2023-10-10
本篇文章主要介紹了詳解vue嵌套路由-params傳遞參數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本篇文章主要介紹了Vue之前端體系與前后端分離，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
這篇文章主要介紹了Vue.extend 編程式插入組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
React/vue開發(fā)報錯TypeError:this.getOptions?is?not?a?function
這篇文章主要給大家介紹了關(guān)于React/vue開發(fā)報錯TypeError:this.getOptions?is?not?a?function的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了專業(yè)級的Vue?多級菜單設(shè)計實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07![解決antd 下拉框 input [defaultValue] 的值的問題](http://img.jbzj.com/images/xgimg/bcimg8.png)
解決antd 下拉框 input [defaultValue] 的值的問題
這篇文章主要介紹了解決antd 下拉框 input [defaultValue] 的值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Element-Plus的ClickOutside指令導(dǎo)致內(nèi)存泄漏的解決辦法
這篇文章給大家介紹了Element-Plus的ClickOutside指令導(dǎo)致內(nèi)存泄漏的解決辦法,文中給出了詳細的解決辦法,遇到同樣問題的小伙伴可以參考閱讀一下本文2024-01-01