如何使用条件运算符为span追加@keyup.enter、@keyup.space事件绑定

你现有代码通过三元表达式基于tabDetails.showPayment状态控制类名、点击事件的逻辑完全可以复用，追加@keyup.enter和@keyup.space事件有两种可行实现：

方案1：直接复用现有三元写法 #

和你绑定@click的逻辑完全一致，直接在标签上追加两个键盘事件的绑定即可，不需要改现有逻辑：

<span
  role="link"
  tabindex="0"
  :class="tabDetails.showPayment ? 'link' : ''" 
  @click="tabDetails.showPayment ? cTab('payments') : null"
  @keyup.enter="tabDetails.showPayment ? cTab('payments') : null"
  @keyup.space="tabDetails.showPayment ? cTab('payments') : null"
>

• 这个写法的缺点是相同的判断和触发逻辑重复写了3次，后续如果调整判断条件、修改触发方法需要同时改三处，容易遗漏出错。

方案2：抽离统一处理方法（推荐） #

把条件判断和触发逻辑抽到单独的处理函数中，模板上直接绑定方法即可，后续维护只需要改一处逻辑：
首先在组件的methods或者组合式API的setup中定义处理函数：

// 组合式API写法，选项式API把方法放到methods节点下即可
const handleTabTrigger = () => {
  // 状态不满足时直接return，不执行跳转
  if (!tabDetails.showPayment) return
  cTab('payments')
}

模板部分简化为：

<span
  role="link"
  tabindex="0"
  :class="tabDetails.showPayment ? 'link' : ''" 
  @click="handleTabTrigger"
  @keyup.enter="handleTabTrigger"
  @keyup.space="handleTabTrigger"
>

额外优化建议 #

你当前给span设置了role="link"做无障碍模拟，建议把tabindex也改成动态绑定：当状态为不可点击时，设置tabindex="-1"让元素无法被键盘聚焦，避免用户聚焦到元素后按键无响应的体验问题：

:tabindex="tabDetails.showPayment ? 0 : -1"

内容的提问来源于stack exchange，提问作者Neeza