如何在 v-for 循环期间有条件地更改表格行样式？

Question

我试图在 v-for 循环中更改表行的背景颜色，当 global.globalGroupLevel 为 0 时，如果它不是 0，则将其改回。 我知道我可以复制表格行并使用 v-if 和 v-else，但这看起来很混乱。 我想过在 tr 元素上使用三元运算符来改变样式，但不确定这是否可行，如果可行，我不知道如何。

我目前的代码部分是这样的

<tbody>
    <template v-for="global in orderItems">
        <tr>
            ... Bunch of code
        </tr>
    </template>
</tbody>

如前所述，我可以用这个......

<tbody>
    <template v-for="global in orderItems">
        <tr v-if="global.globalGroupLevel == 0" style='background: #ccc'>
            ... Bunch of code
        </tr>

        <tr v-else="global.globalGroupLevel != 0" style='background: white'>
            ... Bunch of code
        </tr>

    </template>
</tbody>

但这很麻烦，而且对于改变 tr 背景颜色来说太过分了。

在做我需要做的事情时，我有更好的选择吗？

Answer 1

创建两个名为whitebg和graybg类，并使用类绑定如下：

  <tr v-bind:class="{ global.globalGroupLevel == 0? 'graybg' : 'whitebg'}"></tr>

CSS 规则：

 .whitebg{
    background:white
    }
 .graybg{
    background:#ccc
 }

Answer 2

您可以使用带有类的解决方案，就像在另一个答案中提到的那样，或者使用:style作为您正在寻找的：

:style="{ background: global.globalGroupLevel == 0 ? '#ccc' : 'white' }"

Answer 3

作为最佳实践，我总是尽量避免内联样式，并将 CSS 保留在它的专用标签中。

所以你可以添加一个类：

<tr :class="['gray-group', { 'white-group': global.globalGroupLevel }]"></tr>

和CSS：

tr.gray-group {
  background: #ccc;
}
tr.white-group {
  background: white;
}

这里还有一个工作示例： js fiddle