Как использовать директиву for с диапазоном?vue-15

Директива v-for в Vue может использоваться не только для итерации по массивам и объектам, но и для повторения элементов заданное количество раз, используя синтаксис диапазона.

1. Базовый синтаксис v-for с диапазоном

<template>
  <div>
    <!-- Повторить 5 раз -->
    <span v-for="n in 5" :key="n">{{ n }}</span>
  </div>
</template>

Результат:

1 2 3 4 5

2. Особенности работы с диапазоном

• n принимает целочисленные значения от 1 до указанного числа (включительно)
• Всегда нужно указывать атрибут :key
• Можно использовать в любых элементах и компонентах

3. Практические примеры использования

Создание списка номеров:

<ul>
  <li v-for="i in 10" :key="i">Элемент №{{ i }}</li>
</ul>

Генерация звезд рейтинга:

<div class="rating">
  <span v-for="star in 5" :key="star"
        :class="{ 'active': star <= currentRating }">
    ★
  </span>
</div>

Создание таблицы умножения:

<table>
  <tr v-for="i in 9" :key="i">
    <td v-for="j in 9" :key="j">{{ i * j }}</td>
  </tr>
</table>

4. Использование с компонентами

<template>
  <div>
    <my-component v-for="n in 3" :key="n" :index="n" />
  </div>
</template>

5. Ограничения и особенности

1. Работает только с положительными целыми числами
2. Не поддерживает отрицательные диапазоны
3. Не работает с дробными числами (округляет в меньшую сторону)
4. Для обратного порядка нужно использовать вычисляемое свойство:

computed: {
  reverseRange() {
    return Array.from({length: 5}, (_, i) => 5 - i);
  }
}

<div v-for="n in reverseRange" :key="n">{{ n }}</div>

6. Альтернатива с Array.from

Для более сложных сценариев можно использовать:

data() {
  return {
    range: Array.from({length: 10}, (_, i) => i + 1)
  }
}

<div v-for="n in range" :key="n">{{ n }}</div>

Резюмируем

Директива v-for с диапазоном: ✔ Позволяет повторять элементы N раз
✔ Синтаксис: v-for="n in X", где X - целое число
✔ Начинает отсчет с 1 (а не с 0)
✔ Требует указания уникального :key
✔ Полезен для генерации статического контента
✔ Может использоваться с компонентами

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

• Генерация повторяющихся UI элементов
• Создание статических списков
• Построение таблиц и сеток
• Реализация рейтингов и индикаторов

Для сложных сценариев лучше использовать вычисляемые свойства или методы для генерации диапазона.