如何在v-for循环中有条件地更改表行样式?

时间:2018-11-03 00:10:50

标签: vue.js vuejs2

我试图在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>

但这是一团糟,对于改变背景颜色来说,这很有用。

在做我需要做的事情时,我有更好的选择吗?

3 个答案:

答案 0 :(得分:1)

创建两个名为whitebggraybg的类,并使用类绑定,如下所示:

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

CSS规则:

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

答案 1 :(得分:1)

您可以对一个类使用解决方案,就像在另一个答案中提到的那样,或者在寻找时使用:style

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

答案 2 :(得分:1)

作为最佳实践,我总是尝试避免使用内联样式,并将CSS保留在专用标记中。

因此您可以添加一个类:

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

和CSS:

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

这也是一个有效的示例:js fiddle