проблема создания нечетной и четной ячейки в таблице в Vue Js - PullRequest
Новая
       9

проблема создания нечетной и четной ячейки в таблице в Vue Js

0 голосов
/ 21 ноября 2018

Вот мой код, 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 # ..]

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

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

0 голосов
/ 21 ноября 2018

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