时间戳

首页 > 解决方案 > 如何在 v-for 循环期间有条件地更改表格行样式？

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

问题描述

我正在尝试在 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 背景颜色而言意义重大。

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

标签： javascriptcssvue.jsvuejs2vue-component

解决方案

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

所以你可以添加一个类：

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

和CSS：

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

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

推荐阅读