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

背景

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

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

方案

属性

xx[type] 的方式

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

方法

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

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

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

变量流转

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

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

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇