vue2中动态调用定义在methods中的方法名

无论是变量值的设置还是方法名处理,动态设置在特定情况下总会存在需求。

相对于常见的变量值动态更新的常见处理,那么关于动态根据不同情况来调用不同方法名要如何实现?

本篇文章就来介绍,在vue2中如何使用变量值来动态调用定义在methods中的方法。

一、动态变量调用methods中的方法

<script>
export default {
data() {
return {
}
},
onLoad() {
let a = 'test'
this[a]()
},
methods: {
test() {
console.log("测试数据")
}
}
}
</script>
//打印结果
测试数据

如上代码所示:

    1、定义变量a并设置变量值为methods中test方法名。

    2、在onLoad调用动态配置的a来实现运行methodstest方法。

二、在data中定义数组,循环数组调用methods中方法

<script>
export default {
data() {
return {
arr:[
{fun:'test'},
{fun:'test1'},
{fun:'test2'},
]
}
},
onLoad() {
for (var i = 0; i < this.arr.length; i++) {
this[this.arr[i]['fun']]()
}
},
methods: {
test() {
console.log("测试数据")
},
test1() {
console.log("测试数据1")
},
test2() {
console.log("测试数据2")
}
}
}
</script>
//打印数据
测试数据
测试数据1
测试数据2

通过this[动态变量方法名]方式来实现,在特定需求下根据情况调用methods中定义好的方法。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!