проблема с созданием нечетной и четной ячейки в таблице во 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 vue.js asp.net-mvc v-for
person TanvirAhmedKhan    schedule 21.11.2018    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Я упомянул фреймворк пользовательского интерфейса, который сейчас использую, и назовите его 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).

Пример Nth-child W3School может быть вам полезен.

person wormwlrm    schedule 21.11.2018

arrow_upward
4
arrow_downward

Вы можете использовать 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;
}
person ittus    schedule 21.11.2018