用物件方式綁定行內樣式 - daniel-qa/Vue GitHub Wiki

用物件方式綁定行內樣式

<span 
  :style="{ 
    color: row.serviceId ? '#19be6b' : '#808695', 
    cursor: row.serviceId ? 'pointer' : 'default' 
  }" 
  @click="row.serviceId && goToQuotaManagement(row)"
>

實際效果

有 serviceId：字變綠色、游標變手指、可點擊跳轉。

沒 serviceId：字變灰色、游標是箭頭、點了也沒反應。

說明

:style="{ ... }"

用物件方式綁定行內樣式。

color：

如果 row.serviceId 有值 → 顯示 綠色 (#19be6b)。

如果 row.serviceId 沒有值 → 顯示 灰色 (#808695)。

cursor：

如果 row.serviceId 有值 → 滑鼠移過去時顯示 手指狀 (pointer)，暗示「可點擊」。

如果 row.serviceId 沒有值 → 顯示 箭頭狀 (default)，暗示「不可點擊」。

@click="row.serviceId && goToQuotaManagement(row)"

這裡用了 JS 短路運算：

如果 row.serviceId 有值 → 會執行 goToQuotaManagement(row)。

如果 row.serviceId 沒值 → 不會做任何事。