Ответ
`v-for` — директива Vue.js для рендеринга списков. Основные параметры:
1. **item in items** — стандартный синтаксис, где `items` массив данных, а `item` — текущий элемент.
2. **(item, index) in items** — второй параметр `index` содержит позицию элемента в массиве.
3. **(value, key) in object** — для итерации по объекту, где `value` — значение свойства, `key` — его имя.
4. **(value, key, index) in object** — аналогично, но с добавлением индекса.
Пример:
```
- {{ index }}: {{ item.name }}
Ответ 18+ 🔞
А, ну это же тот самый `v-for`, который списки выводит, как по маслу! Смотри, тут всё просто, но есть нюансы, ёпта.
Вот тебе расклад по полочкам, как это говно работает:
**1. Самый частый случай — по массиву:**
```html
{{ штука.имя }}
```
Берёшь массив `списокШтук` и для каждой `штуки` внутри него создаёшь див. Проще пареной репы.
**2. С индексом, если надо знать номер:**
```html
№{{ индекс }}: {{ штука.имя }}
```
Вот тут уже интереснее — `индекс` тебе говорит, на каком месте в массиве эта штука торчит. Нумерация, ясное дело, с нуля, куда ж без этого.
**3. По объекту, если массив надоел:**
```html
{{ ключ }}: {{ значение }}
```
Перебирает свойства объекта. `ключ` — это имя свойства (строка), `значение` — то, что в нём лежит. Порядок — как браузер выдаст, тут уж не гарантий, блядь.
**4. По объекту, но с индексом ещё (мало ли):**
```html
{{ индекс }}. {{ ключ }}: {{ значение }}
```
Да, и индекс тут тоже есть, который по порядку итерации.
А теперь, внимание, самый важный пиздец! **`:key` — это святое!** Его указывать ОБЯЗАТЕЛЬНО, иначе Vue запутается в своих внутренностях и начнёт перерисовывать не то, что надо.
```html
- {{ index }}: {{ item.name }}