Будь то стилизация, фильтрация данных ответа, рендеринг или другие причины, возможность находить и возвращать каждый нечетный или четный элемент в массиве — полезный трюк.
Моя предыдущая работа много работала с циклами и массивами. Данные поступали в формате 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 в цикле здесь.