Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說(shuō)明
更新時(shí)間：2021年06月04日 16:23:26 作者：霸道流氓
這篇文章主要介紹了Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vue foreach數(shù)組與js中遍歷數(shù)組的寫法
場(chǎng)景
Vue中使用Axios發(fā)送get或者post請(qǐng)求，發(fā)送請(qǐng)求時(shí)需要在js中
對(duì)請(qǐng)求參數(shù)進(jìn)行遍歷并處理。
接收響應(yīng)時(shí)需要對(duì)響應(yīng)結(jié)果進(jìn)行遍歷和處理。
注意區(qū)分在vue和js中foreach數(shù)組的區(qū)別。
實(shí)現(xiàn)
在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開始
})
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue + vuex todolist的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue + vuex todolist的實(shí)現(xiàn)示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開功能
這篇文章主要給大家介紹了關(guān)于element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
vue雙擊事件2.0事件監(jiān)聽(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作
這篇文章主要介紹了vue雙擊事件2.0事件監(jiān)聽(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue3.0?router路由跳轉(zhuǎn)傳參問(wèn)題(router.push)
這篇文章主要介紹了vue3.0?router路由跳轉(zhuǎn)傳參問(wèn)題(router.push)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue3中SetUp函數(shù)的參數(shù)props、context詳解
我們知道setup函數(shù)是組合API的核心入口函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中SetUp函數(shù)的參數(shù)props、context的相關(guān)資料,需要的朋友可以參考下2021-07-07
vue配置electron使用electron-builder進(jìn)行打包的操作方法
這篇文章主要介紹了vue配置electron使用electron-builder進(jìn)行打包的操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
vue+axios實(shí)現(xiàn)文件上傳的實(shí)時(shí)進(jìn)度條
最近用vue寫上傳的時(shí)候,遇到一個(gè)需求就是頁(yè)面上展示上傳的進(jìn)度條,之后寫過(guò)一次,但是用的是假交互,直接從0-100,今天分享一下用axios自帶的onUploadProgress來(lái)完成這個(gè)小需求,感興趣的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue.js添加組件操作,結(jié)合實(shí)例形式分析了vue.js組件的注冊(cè)、調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
Vue3 提供了兩個(gè)新的 API：ref 和 reactive，它們可以幫助我們更好地管理和處理響應(yīng)式數(shù)據(jù)，這篇文章主要介紹了vue3中的ref與reactive的區(qū)別和使用方法,需要的朋友可以參考下2023-04-04
在Vue.js應(yīng)用開發(fā)中,Vue Router 提供了許多特性來(lái)簡(jiǎn)化前端路由管理和用戶體驗(yàn),其中一個(gè)重要的特性便是路由重定向和別名,它們可以幫助我們更好地管理和組織路由,本文將詳細(xì)介紹如何在Vue Router中使用路由重定向和別名,需要的朋友可以參考下2024-09-09