选择css类取决于内容

Question

我的css有问题。

我想选择<tr>元素类。我使用bootstrap，我想使用像.success或.danger这样的引导类。

我使用vue.js并且我有一个id，name，status等对象，状态名称与.success或.danger不匹配但是我需要使用这两个类取决于状态名称。

我知道两个解决方案：

1. 写一个JS函数来返回类名取决于状态名。 <tr class={{myFun(object.status)}}。我的功能是简单的案例陈述。
2. 在sass中扩展bootstrap类名。 .STATUS { @extend .success; }

我是前端的初学者，在创建非常简单的静态html页面之前，我很好奇我应该使用哪种解决方案？也许另一个？我试图在互联网上找到一些东西，但我没有发现任何兴趣 有人可以给我任何建议吗？

Answer 1

您可以使用Vue的内置类指令，如下所示：

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

没有必要为此编写新方法。有关更多示例，请查看Class & Style Bindings Guide。