根据内容选择css类

Question

我的 css 有问题。

我想选择<tr> 元素类。我使用引导程序，我想使用引导程序类，如 .success 或 .danger。

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

我知道两种解决方案：

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

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

Answer 1

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

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

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