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安裝及使用方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-12-12
本文主要介紹了在vue中如何使用高德地圖實現(xiàn)軌跡顯隱的功能,包括了相關代碼的編寫和具體實現(xiàn)步驟,對于想要在自己的項目中使用這一功能的開發(fā)者有一定的參考價值,希望大家對此有所幫助,同時也歡迎大家多多支持腳本之家2024-10-10
這篇文章主要介紹了vue中的正則表達式校驗、驗證方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家介紹了vue3中addRoute路由變化但頁面未刷新問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家詳細介紹了vue項目中openlayers繪制行政區(qū)劃，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
在Vue3 中,v-model是用于創(chuàng)建雙向數(shù)據(jù)綁定的指令,通常,我們使用該指令將任何 HTML 表單元素與一個變量綁定以收集輸入值,本文給大家介紹Vue3.js自定義組件 v-model,感興趣的朋友一起看看吧2023-10-10
今天小編就為大家分享一篇Vue 第三方字體圖標引入 Font Awesome的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue-Router實現(xiàn)頁面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實現(xiàn)頁面正在加載特效方法示例，文中給出了詳細的示例代碼，相信對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。2017-02-02
這篇文章主要為大家介紹了vue響應式Object代理對象的修改和刪除屬性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
Vue.js實戰(zhàn)之組件之間的數(shù)據(jù)傳遞
這篇文章主要介紹了Vue.js實戰(zhàn)之組件之間的數(shù)據(jù)傳遞的相關資料，文中通過示例代碼和圖文介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04