vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼
更新時(shí)間：2024年08月02日 10:14:30 作者：愛粉刷的小星星
項(xiàng)目上有一個(gè)需求,頁(yè)面上有50、60個(gè)數(shù)據(jù)變量,是依次排序遞增的變量,中間有個(gè)別變量用不到,不想把這些變量直接定義在data() { }內(nèi),這篇文章主要介紹了vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼,需要的朋友可以參考下
項(xiàng)目上有一個(gè)需求，頁(yè)面上有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#蟲卵庫(kù)線體編號(hào)1001~1017 2#幼蟲庫(kù)線體編號(hào)1018~1040 (生成的線體編號(hào)數(shù)組中間有個(gè)別用不到的線體編號(hào)可以忽略)
// 3#成蟲庫(kù) 4#成蟲庫(kù) 線體編號(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頁(yè)面中使用變量
<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#蟲卵庫(kù)隱藏的列數(shù)
var num1ddjObjForkHiddenColumn = [];
//2#幼蟲庫(kù)隱藏的列數(shù)
var num2ddjObjForkHiddenColumn = [];
//3#成蟲庫(kù)隱藏的列數(shù)
var num3ddjObjForkHiddenColumn = [];
//4#成蟲庫(kù)隱藏的列數(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#蟲卵庫(kù) 列
num2ddjObjForkHiddenColumn = piler_2_Change(element);
//隱藏的2#蟲卵庫(kù) 列
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#幼蟲庫(kù) 其他任務(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初始化名字變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue router安裝及使用方法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
本文主要介紹了在vue中如何使用高德地圖實(shí)現(xiàn)軌跡顯隱的功能,包括了相關(guān)代碼的編寫和具體實(shí)現(xiàn)步驟,對(duì)于想要在自己的項(xiàng)目中使用這一功能的開發(fā)者有一定的參考價(jià)值,希望大家對(duì)此有所幫助,同時(shí)也歡迎大家多多支持腳本之家2024-10-10
這篇文章主要介紹了vue中的正則表達(dá)式校驗(yàn)、驗(yàn)證方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue3中addRoute路由變化頁(yè)面未刷新問題解決
這篇文章主要為大家介紹了vue3中addRoute路由變化但頁(yè)面未刷新問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue項(xiàng)目中openlayers繪制行政區(qū)劃
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中openlayers繪制行政區(qū)劃，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
在Vue3 中,v-model是用于創(chuàng)建雙向數(shù)據(jù)綁定的指令,通常,我們使用該指令將任何 HTML 表單元素與一個(gè)變量綁定以收集輸入值,本文給大家介紹Vue3.js自定義組件 v-model,感興趣的朋友一起看看吧2023-10-10
Vue 第三方字體圖標(biāo)引入 Font Awesome的方法
今天小編就為大家分享一篇Vue 第三方字體圖標(biāo)引入 Font Awesome的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue-Router實(shí)現(xiàn)頁(yè)面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實(shí)現(xiàn)頁(yè)面正在加載特效方法示例，文中給出了詳細(xì)的示例代碼，相信對(duì)大家具有一定的參考價(jià)值，有需要的朋友們下面來一起看看吧。2017-02-02
vue響應(yīng)式Object代理對(duì)象的修改和刪除屬性
這篇文章主要為大家介紹了vue響應(yīng)式Object代理對(duì)象的修改和刪除屬性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue.js實(shí)戰(zhàn)之組件之間的數(shù)據(jù)傳遞
這篇文章主要介紹了Vue.js實(shí)戰(zhàn)之組件之間的數(shù)據(jù)傳遞的相關(guān)資料，文中通過示例代碼和圖文介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04