vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼
更新時間：2024年08月02日 10:14:30 作者：愛粉刷的小星星
項目上有一個需求,頁面上有50、60個數(shù)據(jù)變量,是依次排序遞增的變量,中間有個別變量用不到,不想把這些變量直接定義在data() { }內(nèi),這篇文章主要介紹了vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼,需要的朋友可以參考下
項目上有一個需求，頁面上有50、60個數(shù)據(jù)變量，是依次排序遞增的變量，中間有個別變量用不到，不想把這些變量直接定義在data() { }內(nèi)。
直接上代碼
1.在mounted() { }，大括號內(nèi)定義并初始化變量
this.yx_1hddj_arr = [];
this.yx_2hddj_arr = [];
this.yx_3hddj_arr = [];
this.yx_4hddj_arr = [];
this.xtAlarm_arr = [];
this.xtVehicle_arr = [];
this.xtVehicle_task_arr = [];
//初始化1#堆垛機 堆垛機列數(shù)組 任務數(shù)組 從3號位開始 到43號位結(jié)束 總共41個列位置（2號位為初始0位）
for (let i = 2; i <= 43; i++) {
if (i == 2) {
this.yx_1hddj_arr[`yx_1hddj_` + i] = ddjGreen;
this.yx_1hddj_arr[`yx_1hddj_` + i + `_task`] = "出:0";
} else {
this.yx_1hddj_arr[`yx_1hddj_` + i] = "";
this.yx_1hddj_arr[`yx_1hddj_` + i + `_task`] = "";
}
}
//初始化2#堆垛機 堆垛機列數(shù)組 任務數(shù)組 從2號位開始 到29號位結(jié)束 總共28個列位置（1號位為初始0位）
for (let i = 1; i <= 29; i++) {
if (i == 1) {
this.yx_2hddj_arr[`yx_2hddj_` + i] = ddjGreen;
this.yx_2hddj_arr[`yx_2hddj_` + i + `_task`] = "出:0";
} else {
this.yx_2hddj_arr[`yx_2hddj_` + i] = "";
this.yx_2hddj_arr[`yx_2hddj_` + i + `_task`] = "";
}
}
//初始化3#堆垛機 堆垛機列數(shù)組 任務數(shù)組 從2號位開始 到29號位結(jié)束 總共28個列位置（1號位為初始0位）
for (let i = 1; i <= 29; i++) {
if (i == 1) {
this.yx_3hddj_arr[`yx_3hddj_` + i] = ddjGreen;
this.yx_3hddj_arr[`yx_3hddj_` + i + `_task`] = "出:0";
} else {
this.yx_3hddj_arr[`yx_3hddj_` + i] = "";
this.yx_3hddj_arr[`yx_3hddj_` + i + `_task`] = "";
}
}
//初始化4#堆垛機 堆垛機列數(shù)組 任務數(shù)組 從2號位開始 到29號位結(jié)束 總共28個列位置 （1號位是初始0位）
for (let i = 1; i <= 29; i++) {
if (i == 1) {
this.yx_4hddj_arr[`yx_4hddj_` + i] = ddjGreen;
this.yx_4hddj_arr[`yx_4hddj_` + i + `_task`] = "出:0";
} else {
this.yx_4hddj_arr[`yx_4hddj_` + i] = "";
this.yx_4hddj_arr[`yx_4hddj_` + i + `_task`] = "";
}
}
//初始化線體載具 線體任務 線體告警
// 1#蟲卵庫線體編號1001~1017 2#幼蟲庫線體編號1018~1040 (生成的線體編號數(shù)組中間有個別用不到的線體編號可以忽略)
// 3#成蟲庫 4#成蟲庫 線體編號2001~2067
for (let i = 1001; i <= 1040; i++) {
this.xtVehicle_arr[`xtVehicle_` + i] = "";
this.xtVehicle_task_arr[`xtVehicle_` + i + `_task`] = "";
this.xtAlarm_arr[`xtAlarm_` + i] = "";
}
for (let i = 2001; i <= 2067; i++) {
this.xtVehicle_arr[`xtVehicle_` + i] = "";
this.xtVehicle_task_arr[`xtVehicle_` + i + `_task`] = "";
this.xtAlarm_arr[`xtAlarm_` + i] = "";
}2.在index.vue頁面中使用變量
<g>
<g>
<g>
<g>
<text
transform="matrix(1 0 0 1 541.4 108.6)"
class="st11 st2 st18"
>
{{ yx_1hddj_arr.yx_1hddj_40_task }}
</text>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<g>
<text
transform="matrix(1 0 0 1 510.7 109)"
class="st11 st2 st18"
>
{{ yx_1hddj_arr.yx_1hddj_41_task }}
</text>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<g>
<text
transform="matrix(1 0 0 1 479.3 107.1)"
class="st11 st2 st18"
>
{{ yx_1hddj_arr.yx_1hddj_42_task }}
</text>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<g>
<text
transform="matrix(1 0 0 1 446.1 107.6)"
class="st11 st2 st18"
>
{{ yx_1hddj_arr.yx_1hddj_43_task }}
</text>
</g>
</g>
</g>
</g>3.在methods:{ }自定義方法內(nèi)使用
//1#堆垛機 2#堆垛機 3#堆垛機 4#堆垛機
var num1ddjObj;
var num2ddjObj;
var num3ddjObj;
var num4ddjObj;
//1#蟲卵庫隱藏的列數(shù)
var num1ddjObjForkHiddenColumn = [];
//2#幼蟲庫隱藏的列數(shù)
var num2ddjObjForkHiddenColumn = [];
//3#成蟲庫隱藏的列數(shù)
var num3ddjObjForkHiddenColumn = [];
//4#成蟲庫隱藏的列數(shù)
var num4ddjObjForkHiddenColumn = [];//2#堆垛機
if (dObj.tunnelId == 2) {
num2ddjObj = dObj;
if (num2ddjObj) {
//顯示當前列 frontForkColumn
if (num2ddjObj.frontForkColumn != 0) {
this.yx_2hddj_arr[`yx_2hddj_` + num2ddjObj.frontForkColumn] =
ddjGreen;
} else {
this.yx_2hddj_arr[yx_1hddj_1] = ddjGreen;
}
var element = num2ddjObj.frontForkColumn;
//隱藏的2#蟲卵庫 列
num2ddjObjForkHiddenColumn = piler_2_Change(element);
//隱藏的2#蟲卵庫 列
for (let i = 0; i < num2ddjObjForkHiddenColumn.length; i++) {
this.yx_2hddj_arr[
`yx_2hddj_` + num2ddjObjForkHiddenColumn[i]
] = "";
}
//任務號 任務類型+任務號組成
var taskNumberStr;
//前插
var froTaskDto;
//后插
var baTaskDto;
if (num2ddjObj.platform == 1) {
froTaskDto = num2ddjObj.frontTaskDto;
baTaskDto = num2ddjObj.backTaskDto;
taskNumberStr =
(froTaskDto.firstType == 1
? "入:"
: froTaskDto.firstType == 2
? "出:"
: froTaskDto.firstType == 3
? "移:"
: froTaskDto.firstType == 4
? "輸送線用:"
: froTaskDto.firstType == 5
? "轉(zhuǎn)運:"
: "") + froTaskDto.wcsId;
taskNumberStr =
taskNumberStr +
(baTaskDto.firstType == 1
? "入:"
: baTaskDto.firstType == 2
? "出:"
: baTaskDto.firstType == 3
? "移:"
: baTaskDto.firstType == 4
? "輸送線用:"
: baTaskDto.firstType == 5
? "轉(zhuǎn)運:"
: "") +
baTaskDto.wcsId;
} else {
froTaskDto = num2ddjObj.frontTaskDto;
taskNumberStr =
(froTaskDto.firstType == 1
? "入:"
: froTaskDto.firstType == 2
? "出:"
: froTaskDto.firstType == 3
? "移:"
: froTaskDto.firstType == 4
? "輸送線用:"
: froTaskDto.firstType == 5
? "轉(zhuǎn)運:"
: "") + froTaskDto.wcsId;
}
//如果堆垛機有當前列 任務號顯示在對應當前列位置上 沒有當前列 就顯示在堆垛機首個位置
if (num2ddjObj.frontForkColumn != 0) {
this.yx_2hddj_arr[
`yx_2hddj_` + num2ddjObj.frontForkColumn + `_task`
] = taskNumberStr;
} else {
this.yx_2hddj_arr[`yx_2hddj_` + 1 + `_task`] = taskNumberStr;
}
//隱藏的2#幼蟲庫 其他任務號
for (let i = 0; i < num2ddjObjForkHiddenColumn.length; i++) {
this.yx_2hddj_arr[
`yx_2hddj_` + num2ddjObjForkHiddenColumn[i] + `_task`
] = "";
}
}
//數(shù)組新增一條記錄刪除一條記錄會更新dom
this.yx_2hddj_arr.push("2#");
this.yx_2hddj_arr.pop();
}4.監(jiān)視變量更新
watch: {
yx_4hddj_arr: {
handler(val, oldVal) {},
deep: true,
},
yx_3hddj_arr: {
handler(val, oldVal) {},
deep: true,
},
yx_2hddj_arr: {
handler(val, oldVal) {},
deep: true,
},
yx_1hddj_arr: {
handler(val, oldVal) {},
deep: true,
},
xtAlarm_arr: {
handler(val, oldVal) {},
deep: true,
},
xtVehicle_arr: {
handler(val, oldVal) {},
deep: true,
},
xtVehicle_task_arr: {
handler(val, oldVal) {},
deep: true,
},
},到此這篇關于vue生成初始化名字相近的變量并放到數(shù)組中的文章就介紹到這了,更多相關vue初始化名字變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
詳解基于vue-router的動態(tài)權限控制實現(xiàn)方案
本篇文章主要介紹了詳解基于vue-router的動態(tài)權限實現(xiàn)方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
今天小編就為大家分享一篇vue兄弟組件傳遞數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
登錄頁面的實現(xiàn)及跳轉(zhuǎn)代碼實例(vue-router)
在Vue.js中可以使用vue-router來實現(xiàn)前端路由,通過路由來跳轉(zhuǎn)頁面,這篇文章主要給大家介紹了關于登錄頁面的實現(xiàn)及跳轉(zhuǎn)(vue-router)的相關資料,需要的朋友可以參考下2023-12-12
關于對keep-alive的理解,使用場景以及存在的問題解讀
這篇文章主要介紹了關于對keep-alive的理解,使用場景以及存在的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了vue style屬性設置背景圖片的相對路徑無效的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)自定義表格工具擴展，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue3實現(xiàn)在新標簽中打開指定網(wǎng)址的方法
我希望點擊查看按鈕的時候,能夠在新的標簽頁面打開這個文件的地址進行預覽,該如何實現(xiàn)呢,下面小編給大家?guī)砹嘶趘ue3實現(xiàn)在新標簽中打開指定的網(wǎng)址,感興趣的朋友跟隨小編一起看看吧2024-07-07
Vue-CLI 3.X 部署項目至生產(chǎn)服務器的方法
這篇文章主要介紹了Vue-CLI 3.X 部署項目至生產(chǎn)服務器的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
前端性能監(jiān)控是一種用于實時監(jiān)控前端用戶行為和響應時間數(shù)據(jù)的技術,這篇文章主要介紹了前端監(jiān)控方案以及最佳實踐的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-09-09
這篇文章主要介紹了JS數(shù)組Array常用方法匯總和實例,JavaScript創(chuàng)建數(shù)組的方式,找數(shù)組元素,數(shù)組去重,實現(xiàn)數(shù)組排序需要的朋友可以參考下2022-05-05