Будь то стилизация, фильтрация данных ответа, рендеринг или другие причины, возможность находить и возвращать каждый нечетный или четный элемент в массиве — полезный трюк.

Моя предыдущая работа много работала с циклами и массивами. Данные поступали в формате JSON, и разработчикам приходилось искать творческие способы их рендеринга с использованием как можно большего количества циклов и DRY-кода. Это открыло возможность использования индексов массива для динамического стиля и рендеринга элементов.

В одном случае я хотел отобразить список сервисов (имя, тип, заголовок, описание, ссылка, изображение) из JSON API с макетом из двух столбцов, в котором текстовый столбец чередовался слева, а изображение справа; и наоборот (изображение слева, текст справа) для всех элементов массива.

Поскольку я визуализировал данные, перебирая массив, мне нужен был метод для динамической сортировки/фильтрации объектов.

Введите модуль!

Пример

Допустим, у вас есть массив объектов, например список ваших репозиториев на github:

https://api.github.com/users/octocat/repos

и вы хотите отобразить их как простой вертикальный неупорядоченный список записей. Кроме того, вы хотите стилизовать записи чередующимися полосами зебры (или чередующимися цветами), чтобы различать их для удобства чтения.

Вы можете сделать v-if и указать жестко закодированный список индексов, но это неэффективно и нецелесообразно с длинным массивом и большим количеством данных:

<div v-if="index === 0 && index === 2 && index === 4" style='background: grey'>
  <!-- your array data -->
</div>

<div v-else style='background: white'>
  <!-- your array data -->
</div>

Лучше использовать оператор модуля, модуля или остатка, определяемый знаком процента (%).

«Оператор по модулю используется для проверки того, является ли число четным или нечетным. Это потому, что четные числа не имеют остатков при делении на два. С другой стороны, нечетные числа имеют остаток, если они делятся на два».

Аналогичным образом это можно применить к фильтрации четных и нечетных элементов массива, не являющихся числами.

Таким образом, чтобы стилизовать ваш массив, где каждая запись other имеет светло-серый фон, вы можете зациклиться на своем массиве и динамически стилизовать индексы, используя модуль:

No remainder when divided by two = Even number
index % 2 != 0
Has a remainder when divided by two = Odd number
index % 2 === 0
---
*For reference a remainder is the value left after the division of two numbers. If a number (dividend) is not completely divisible by another number (divisor) then we are left with a value once the division is done. This value is called the remainder.

С массивом под названием «репозитории» вы можете применить эту концепцию либо с помощью динамических встроенных стилей:

<div v-for="(item, index) in repos" :key="index" 
:style="index % 2 != 0 ? 'background: lightgrey' : 'background: white'">
  <!-- your array data -->
</div>

Или используя динамические классы:

<div v-for="(item, index) in repos" :key="index" 
:class="index % 2 != 0 ? 'bg-lightgrey' : index % 2 === 0 ? 'bg-white'">
  <!-- your array data -->
</div>

Вы можете сделать то же самое с фильтром массива():

function bigOdds() {
  const array = ['green', 'red', 'orange', 'pink', 'black'];
  const oddItems = array.filter((num, index) => index % 2 === 0);
  console.log(oddItems);
}

bigOdds();
// returns array items ['green', 'orange', 'black']

И то же самое с массивом forEach():

function bigOdds() {
  const array = ['green', 'red', 'orange', 'pink', 'black'];
  let odds = [];
  array.forEach(myFunction)
  function myFunction(item, index) {
    if(index % 2 === 0) {
        odds.push(index)
    }
    console.log(odds);
}

bigOdds()
// returns array indexes [0, 2, 4]

Модуль дает нам простой способ динамически стилизовать данные и творчески отображать их с помощью Vue.js.

Узнайте больше о модуле здесь и о том, как возвращать четные и нечетные элементы с помощью методов array.filter, forEach и for в цикле здесь.