v-for и работа со списками

В Petite-Vue директива v-for используется для итерации по массивам, объектам и диапазонам чисел, создавая динамический набор элементов на основе данных. Синтаксис директивы схож с Vue.js, однако Petite-Vue ориентирована на минимализм, поэтому конфигурация и работа с данными выполняется проще и быстрее.

Простейший пример итерации по массиву выглядит так:

<div v-scope="{ items: ['яблоко', 'банан', 'вишня'] }">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

Здесь v-for="item in items" создаёт новый <li> для каждого элемента массива items. Переменная item доступна внутри блока и может быть использована для отображения данных.

Индекс элемента

Для получения индекса текущего элемента добавляется второй параметр:

<li v-for="(item, index) in items">{{ index }}: {{ item }}</li>

index автоматически принимает числовое значение позиции элемента в массиве, начиная с нуля.

Итерация по объектам

v-for позволяет перебирать свойства объектов:

<div v-scope="{ user: { name: 'Иван', age: 30, city: 'Москва' } }">
  <ul>
    <li v-for="(value, key) in user">{{ key }}: {{ value }}</li>
  </ul>
</div>

В этом примере key получает имя свойства (name, age, city), а value — соответствующее значение.

Использование диапазонов чисел

Можно создать список чисел с помощью директивы v-for:

<div>
  <span v-for="n in 5">{{ n }}</span>
</div>

Это создаст пять элементов <span> с числами от 1 до 5. Petite-Vue автоматически формирует массив из указанного диапазона.

Ключи (key) при итерации

Для эффективного обновления DOM при изменении данных рекомендуется использовать атрибут :key. Он позволяет Petite-Vue отслеживать элементы и минимизировать перерисовку:

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

item.id должен быть уникальным для каждого элемента. Без key при изменении массива могут возникнуть лишние перестановки и повторные рендеры.

Вложенные списки

v-for поддерживает вложенные циклы, что удобно для работы с двумерными массивами или сложными структурами:

<div v-scope="{ matrix: [[1,2], [3,4], [5,6]] }">
  <ul>
    <li v-for="(row, i) in matrix">
      Row {{ i }}:
      <span v-for="(cell, j) in row">{{ cell }}</span>
    </li>
  </ul>
</div>

Внутренний v-for создаёт элементы для каждого элемента вложенного массива, сохраняя индексы внешнего и внутреннего циклов.

Динамическая фильтрация и сортировка

Списки, создаваемые с помощью v-for, можно динамически фильтровать и сортировать на этапе рендеринга:

<div v-scope="{ items: ['яблоко', 'банан', 'вишня'], filter: 'а' }">
  <ul>
    <li v-for="item in items.filter(i => i.includes(filter))">{{ item }}</li>
  </ul>
</div>

Здесь список элементов обновляется автоматически при изменении значения filter, отображая только подходящие элементы.

Комбинация с v-if

В Petite-Vue можно комбинировать v-for с v-if, однако следует учитывать, что фильтрация элементов через v-if выполняется на этапе рендеринга каждого элемента:

<li v-for="item in items" v-if="item.startsWith('б')">{{ item }}</li>

Для больших списков более оптимально использовать фильтры в вычисляемых выражениях или прямо в массиве.

Итерация с объектами сложной структуры

Если объект содержит массивы или вложенные объекты, v-for остаётся универсальным инструментом для их отображения:

<div v-scope="{ users: [{ name: 'Анна', roles: ['admin', 'editor'] }, { name: 'Игорь', roles: ['user'] }] }">
  <ul>
    <li v-for="user in users">
      {{ user.name }}
      <ul>
        <li v-for="role in user.roles">{{ role }}</li>
      </ul>
    </li>
  </ul>
</div>

Каждое свойство и элемент вложенных массивов остаются реактивными, автоматически обновляясь при изменении данных.

Резюме по работе с v-for

  • Поддерживаются массивы, объекты и числовые диапазоны.
  • Можно получать индекс элемента и ключ для оптимизации.
  • Вложенные циклы позволяют строить сложные структуры.
  • Фильтрация и сортировка выполняются в выражениях прямо в v-for.
  • Для больших массивов рекомендуется использовать :key и вычисляемые фильтры вместо v-if внутри цикла.

Эти возможности делают v-for в Petite-Vue мощным инструментом для динамического отображения данных без лишнего кода.

Оглавление