Vue中当API返回值为0时禁用按钮并添加suspended类

在Vue中可以通过动态绑定class的方式实现需求，当赔率值为"0.00"时自动给对应按钮添加suspended类，具体修改如下：

修改event.vue模板代码 #

<div class="inply-coupon-odds-column">
  <span 
    data-id="118584087800" 
    class="bvs-button-multi-sport" 
    clicksource="in-play"
    :class="{ suspended: tgames.home_odd === '0.00' }"
  >{{ tgames.home_odd }}</span>
  
  <span 
    data-id="118584088300" 
    class="bvs-button-multi-sport" 
    clicksource="in-play"
    :class="{ suspended: tgames.neutral_odd === '0.00' }"
  >{{ tgames.neutral_odd }}</span>
  
  <span 
    data-id="118584088000" 
    class="bvs-button-multi-sport" 
    clicksource="in-play"
    :class="{ suspended: tgames.away_odd === '0.00' }"
  >{{ tgames.away_odd }}</span>
</div>

代码说明 #

1. 动态class绑定：使用Vue的:class指令，传入对象语法{ 类名: 条件 }，当条件为true时自动添加对应类。这里直接判断API返回的字符串值是否等于"0.00"（API返回的赔率是字符串类型）。
2. 响应式更新：由于你每分钟会从API更新tgames数据，Vue的响应式系统会自动检测数据变化，实时更新按钮的class状态，无需手动操作DOM。

补充：禁用交互的样式建议 #

为了让用户直观感受到按钮被禁用，建议在CSS中添加suspended类的样式：

.suspended {
  opacity: 0.6;
  pointer-events: none; /* 禁止点击交互 */
  cursor: not-allowed;
}

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