> For the complete documentation index, see [llms.txt](https://d-ukolov.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://d-ukolov.gitbook.io/vue/basics/cikly/v-for.md).

# v-for

## v-for

* **Принимает:** `Array | Object | number | string | Iterable`

Многократно отрисовывает элемент или блок шаблона, основываясь на переданных данных. Значение директивы должно следовать синтаксису `alias in expression` — в `alias` будет элемент текущей итерации:

```markup
<div v-for="item in items">
  {{ item.text }}
</div>
```

### Отображение массива элементов с помощью `v-for` <a href="#otobrazhenie-massiva-elementov-s-pomoshyu-v-for" id="otobrazhenie-massiva-elementov-s-pomoshyu-v-for"></a>

Директива `v-for`  используется для отрисовки списка элементов на основе массива данных. У директивы `v-for` особый синтаксис записи: `item in items`, где `items` — исходный массив, а `item` — **ссылка** на текущий элемент массива:

```markup
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
```

```javascript
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
```

Результат:

<div align="left"><img src="/files/-LwTp1BpZMXSLrLE-tnp" alt=""></div>

Внутри блока `v-for` доступны свойства из области видимости родителя. У `v-for` также есть второй опциональный параметр с индексом текущего элемента.

```markup
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
```

```javascript
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Родитель',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
```

Результат:

<div align="left"><img src="/files/-LwTpQKMfZB0_yiGEtK-" alt=""></div>

Вместо `in` разделителем можно использовать `of`, как в итераторах JavaScript:

```markup
<div v-for="item of items"></div>
```

### `v-for` для объекта

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

```markup
<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
```

```javascript
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
```

Результат:

<div align="left"><img src="/files/-LwTpuNUUjtC-yJa8_Jf" alt=""></div>

Можно использовать второй аргумент для получения имени свойства (ключа объекта):

```javascript
<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>
```

Результат:

<div align="left"><img src="/files/-LwTq523iuJx3gUJCexO" alt=""></div>

И третий — для индексов:

```markup
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>
```

Результат:

<div align="left"><img src="/files/-LwTqGZR4sF2vIC9irPg" alt=""></div>

{% hint style="info" %}
При итерировании по объекту порядок обхода такой же как и в `Object.keys()`. Его консистентность **не гарантируется** при использовании различных реализаций движков JavaScript.
{% endhint %}

## `v-for` и диапазоны

В `v-for` можно передать целое число. В этом случае шаблон будет повторён указанное число раз.

```markup
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>
```

Результат:

<div align="left"><img src="/files/-LwTtpQ1JNwQjepk3jWk" alt=""></div>

## `v-for` и тег `template`

Подобно использованию с `v-if`, также можно использовать тег `<template>` с директивой `v-for` для отображения блока из нескольких элементов.

```markup
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>
```

## Компоненты и `v-for`

Можно использовать `v-for` на компонентах, как и на обычных элементах:

```markup
<my-component v-for="item in items" :key="item.id"></my-component>
```

{% hint style="info" %}
В версиях 2.2.0+, при использовании v-for на компонентах теперь обязательно требуется указывать key
{% endhint %}

Однако, в компонент никакие данные не передаются автоматически, поскольку у компонентов изолированные области видимости. Для передачи итерируемых данных в компонент необходимо явно использовать входные параметры:

```markup
<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>
```

Причина, почему `item` не передаётся в компонент автоматически, в том, что это сделает компонент жёстко связанным с логикой работы `v-for`. Но если указывать источник данных явно, компонент можно будет использовать и в других ситуациях.

## `v-for` и `v-if`

**Не рекомендуется** использовать вместе `v-if` и `v-for`.&#x20;

Когда присутствуют вместе на одном элементе, `v-for` имеет больший приоритет, чем `v-if`. Поэтому `v-if` будет выполняться для каждой итерации цикла. Это полезно, когда нужно отобразить только *некоторые* элементы списка, например:

```markup
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>
```

В результате будут отображены только задачи, которые ещё не выполнены.

Если необходимо по условию пропускать выполнение всего цикла, переместите `v-if` на внешний элемент (или на `<template>`). Например:

```markup
<ul v-if="shouldRenderTodos">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
```