Проблема с созданием нечетной и четной ячейки в таблице во Vue Js
Вот мой код, myData - это моя модель данных vue, в которой есть какое-то поле: a, b, ... odd-cell и even-cell - это классы CSS с разным цветом фона. это цикл foreach, как я могу вычислить что-то вроде if (length of myData% 2 == 1) в v-if, чтобы добавить нечетный и четный класс в мой div.
<div v-for = "item in myData">
<div v-if = "" class='odd-cell'>
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
<div v-else class='even-cell'>
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
</div>
[я пишу на странице просмотра cshtml, так что вы также можете предложить код на C# ..]
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать index:
<div v-for = "(item, index) in myData">
<div v-if = "" :class = "{'odd-cell': index % 2 === 1, 'even-cell': index % 2 === 0}">
<p> {{item.a}} </p>
<p> {{item.b}} </p>
</div>
</div>
Но есть лучшее решение с css nth-child
div:nth-child(odd) {
background: red;
}
div:nth-child(even) {
background: blue;
}
Я сослался на фреймворк пользовательского интерфейса, который сейчас использую, и назовите его iView.
Конечно, они также поддерживают компонент таблицы с чередованием. Поэтому мне стало интересно, как они это делают.
.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
background-color: #f8f8f9;
}
Как видите, поддержка CSS для обработки каждого случая четности и нечетности с помощью nth-child(). Нет более простого способа сделать это.
кроме того, вы можете использовать более сложную формулу в качестве параметра, например:
(an + b).
Пример W3School Nth-child может быть вам полезен.