Vue中根据方法名称动态调用方法

admin管理员组

文章数量:1794759

Vue中根据方法名称动态调用方法

很重要: 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意. 现象就是, 修改v-if绑定的值, 切换不生效.

// 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意 <script> export default { name: "DynamicFunc", data() { return { key: '', value: '', } }, mounted() { // 测试一下 this.callModelFun('funcA'); this.callModelFun('funcB'); }, methods: { test(func) { }, /** * 根据方法名称调用方法 */ callModelFun(funcName) { let methods = this.$options.methods; // 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意 const _this = this; methods[funcName](_this); }, /** * funcA * @param _this */ funcA(_this) { console.log("调用A方法") _this.key = "A"; _this.value = "A"; console.log(_this.key, _this.value) }, /** * funcB * @param _this */ funcB(_this) { console.log("调用B方法") _this.key = "B"; _this.value = "B"; console.log(_this.key, _this.value) } } } </script>

本文标签： 方法名称动态Vue