以vant-weapp 为例
在0.x版本中,vant没有在事件中添加三元运算
<button
bindtap="onClick"
bindgetuserinfo="bindGetUserInfo"
bindcontact="bindContact"
bindgetphonenumber="bindGetPhoneNumber"
binderror="bindError"
bindlaunchapp="bindLaunchApp"
bindopensetting="bindOpenSetting"
></button>
对应编译输出
<button
@click="onClick"
@getuserinfo="bindGetUserInfo"
@contact="bindContact"
@getphonenumber="bindGetPhoneNumber"
@error="bindError"
@launchapp="bindLaunchApp"
@opensetting="bindOpenSetting"
></button>
在1.x版本中
<button
bindtap="{{ !disabled ? 'onClick' : 'noop' }}"
bindgetuserinfo="{{ !disabled ? 'bindGetUserInfo' : 'noop' }}"
bindcontact="{{ !disabled ? 'bindContact' : 'noop' }}"
bindgetphonenumber="{{ !disabled ? 'bindGetPhoneNumber' : 'noop' }}"
binderror="{{ !disabled ? 'bindError' : 'noop' }}"
bindlaunchapp="{{ !disabled ? 'bindLaunchApp' : 'noop' }}"
bindopensetting="{{ !disabled ? 'bindOpenSetting' : 'noop' }}"
></button>
对应编译输出
<button
@click="!disabled ? 'onClick' : 'noop'"
@getuserinfo="!disabled ? 'bindGetUserInfo' : 'noop'"
@contact="!disabled ? 'bindContact' : 'noop'"
@getphonenumber="!disabled ? 'bindGetPhoneNumber' : 'noop'"
@error="!disabled ? 'bindError' : 'noop'"
@launchapp="!disabled ? 'bindLaunchApp' : 'noop'"
@opensetting="!disabled ? 'bindOpenSetting' : 'noop'"
>
在vue中的@click中三元运算
@click="!disabled ? onClick() : noop()"
有效
另外,vant的这个写法在微信小程序中能正常使用,在h5中没用
codesyofo (作者)
微信小程序自定义组件
2020-04-23 13:16