vue生成初始化名字相近的变量并放到数组中的示例代码
更新时间：2024年08月02日 10:14:30 作者：爱粉刷的小星星
项目上有一个需求,页面上有50、60个数据变量,是依次排序递增的变量,中间有个别变量用不到,不想把这些变量直接定义在data() { }内,这篇文章主要介绍了vue生成初始化名字相近的变量并放到数组中的示例代码,需要的朋友可以参考下
项目上有一个需求，页面上有50、60个数据变量，是依次排序递增的变量，中间有个别变量用不到，不想把这些变量直接定义在data() { }内。
直接上代码
1.在mounted() { }，大括号内定义并初始化变量
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#堆垛机 堆垛机列数组 任务数组 从3号位开始 到43号位结束 总共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#堆垛机 堆垛机列数组 任务数组 从2号位开始 到29号位结束 总共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#堆垛机 堆垛机列数组 任务数组 从2号位开始 到29号位结束 总共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#堆垛机 堆垛机列数组 任务数组 从2号位开始 到29号位结束 总共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 (生成的线体编号数组中间有个别用不到的线体编号可以忽略)
// 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:{ }自定义方法内使用
//1#堆垛机 2#堆垛机 3#堆垛机 4#堆垛机
var num1ddjObj;
var num2ddjObj;
var num3ddjObj;
var num4ddjObj;
//1#虫卵库隐藏的列数
var num1ddjObjForkHiddenColumn = [];
//2#幼虫库隐藏的列数
var num2ddjObjForkHiddenColumn = [];
//3#成虫库隐藏的列数
var num3ddjObjForkHiddenColumn = [];
//4#成虫库隐藏的列数
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
? "转运:"
: "") + froTaskDto.wcsId;
taskNumberStr =
taskNumberStr +
(baTaskDto.firstType == 1
? "入:"
: baTaskDto.firstType == 2
? "出:"
: baTaskDto.firstType == 3
? "移:"
: baTaskDto.firstType == 4
? "输送线用:"
: baTaskDto.firstType == 5
? "转运:"
: "") +
baTaskDto.wcsId;
} else {
froTaskDto = num2ddjObj.frontTaskDto;
taskNumberStr =
(froTaskDto.firstType == 1
? "入:"
: froTaskDto.firstType == 2
? "出:"
: froTaskDto.firstType == 3
? "移:"
: froTaskDto.firstType == 4
? "输送线用:"
: froTaskDto.firstType == 5
? "转运:"
: "") + 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`
] = "";
}
}
//数组新增一条记录删除一条记录会更新dom
this.yx_2hddj_arr.push("2#");
this.yx_2hddj_arr.pop();
}4.监视变量更新
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生成初始化名字相近的变量并放到数组中的文章就介绍到这了,更多相关vue初始化名字变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了详解基于vue-router的动态权限实现方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
今天小编就为大家分享一篇vue兄弟组件传递数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在Vue.js中可以使用vue-router来实现前端路由,通过路由来跳转页面,这篇文章主要给大家介绍了关于登录页面的实现及跳转(vue-router)的相关资料,需要的朋友可以参考下2023-12-12
关于对keep-alive的理解,使用场景以及存在的问题解读
这篇文章主要介绍了关于对keep-alive的理解,使用场景以及存在的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了vue style属性设置背景图片的相对路径无效的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了vue实现自定义表格工具扩展，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
我希望点击查看按钮的时候,能够在新的标签页面打开这个文件的地址进行预览,该如何实现呢,下面小编给大家带来了基于vue3实现在新标签中打开指定的网址,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了Vue-CLI 3.X 部署项目至生产服务器的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
前端性能监控是一种用于实时监控前端用户行为和响应时间数据的技术,这篇文章主要介绍了前端监控方案以及最佳实践的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-09-09
这篇文章主要介绍了JS数组Array常用方法汇总和实例,JavaScript创建数组的方式,找数组元素,数组去重,实现数组排序需要的朋友可以参考下2022-05-05
最新评论