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