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

Posted 2023-02-23

【中文标题】如何在 v-for 循环期间有条件地更改表格行样式？

【英文标题】：How to conditionally change table row style during a v-for loop?

【发布时间】：2019-04-07 05:00:35

【问题描述】：

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

我是否有更好的选择来做我需要做的事情？

【参考方案1】：

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

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

【参考方案2】：

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

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

CSS 规则：

 .whitebg
    background:white
    
 .graybg
    background:#ccc
 

【参考方案3】：

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

所以你可以添加一个类：

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

还有css：

tr.gray-group 
  background: #ccc;

tr.white-group 
  background: white;

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