我试图在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>
但这是一团糟,对于改变背景颜色来说,这很有用。
在做我需要做的事情时,我有更好的选择吗?
答案 0 :(得分:1)
创建两个名为whitebg
和graybg
的类,并使用类绑定,如下所示:
<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