javascript - 根据内容选择 css 类

Question

我对 CSS 有疑问。

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

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

我知道两种解决方案:

1. 编写一个 JS 函数以根据状态名称返回类名称。 <tr class={{myFun(object.status)}} .我的功能是简单的 case 语句。
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有关更多示例。