Как условно изменить стиль строки таблицы во время цикла v-for?

Question

Я пытаюсь изменить цвет фона строки таблицы в цикле v-for, когда global.globalGroupLevel равен 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>

Но это неопрятно и слишком для того, чтобы изменить цвет фона.

Есть ли у меня лучший вариант в том, что мне нужно делать?

Answer 1

Вы можете использовать решение с классом, как это было упомянуто в другом ответе, или использовать :style так, как вы искали:

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

Answer 2

В качестве лучшей практики я всегда стараюсь избегать встроенных стилей и сохраняю CSS в выделенном теге.

Таким образом, вы можете добавить класс:

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

и css:

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

Также вот рабочий пример: js fiddle

Answer 3

Создайте два класса с именами whitebg и graybg и используйте привязку классов следующим образом:

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

Правила CSS:

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