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