vue2在模板里使用动态属性名和动态方法名#前端#vue

背景

在vue的使用中,有时候需要在同一处根据情况使用不同属性或者不同方法

例如在v-for中,根据item的不同情况,给里面模板指定不同属性和方法

方案

属性

xx[type] 的方式

即将待动态使用的属性放在data的至少第二层级里,则可以根据type取得不同变量。如果放在data第一层,在模板里无法通过this和type取得所需变量,因为在模板里无法解析this

方法

  • 使用一个统一的入口方法xxx(type),在xxx方法内部再根据情况去调用具体要执行的方法

  • 对于组件属性,可使用高阶函数

  • 对于组件事件回调,不能用高阶函数,模板内容不会被执行

变量流转

例如处理数组循环的元素的各自业务处理

  • 使用中转data属性,例如currentSth,需要注意用$set做修改
  • 记录找到变量的索引,例如数组下标值
  • 使用闭包,注意用$set做修改
updatedupdated2026-03-072026-03-07