選擇CSS類取決於內容

Question

我有一個問題與CSS。

我想選擇<tr>元素類。我使用bootstrap，我想使用類似.success或.danger的引導類。

我使用vue.js和我有一個ID，名稱，狀態等對象，狀態名稱與.success或.danger不匹配，但我需要使用這兩個類取決於狀態名稱。

我知道兩種解決方案：

1. 寫JS函數返回的類名取決於狀態的名字。 <tr class={{myFun(object.status)}}。我的功能是簡單的case語句。
2. 在sass中擴展引導類名稱。 .STATUS { @extend .success; }

我初學者用前端，我創造了非常簡單的靜態的HTML頁面之前，我很好奇，我應該使用哪一個解決方案？也許另一個？我試圖在互聯網上找到一些東西，但我沒有發現任何興趣。
有沒有人對我有任何建議？

Answer 1

您可以使用Vue公司的內置類的指令，像這樣：

<tr 
    :class="{ 
    'success': object.status === 'somestatus', 
    'error': object.status === 'otherstatus' 
    }"> 
    ... 
</tr> 

有沒有必要寫應該是一個新的方法。有關更多示例，請參閱Class & Style Bindings Guide。