选择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。