# Перебор объектов в Vue

Объекты также перебираются с помощью директивы `v-for`. Давайте посмотрим, как это делается. Пусть у нас есть следующий объект:

`data() { return { obj: {a: 1, b: 2, c: 3}, } }`

Переберем этот объект циклом и выведем его элементы:

`<template> <p v-for="elem in obj"> {{ elem }} </p> </template>`

А теперь выведем и ключи, и элементы:

`<template> <p v-for="(elem, key) in obj"> {{ key }} {{ elem }} </p> </template>`

А теперь выведем еще и порядковые номера элементов в объекте:

`<template> <p v-for="(elem, key, index) in obj"> {{ index }} {{ key }} {{ elem }} </p> </template>`

Дан следующий объект:

`{ user1: '100$', user2: '200$', user3: '300$', }`

С помощью `v-for` выведите на экран следующее:

`<ul> <li>100$</li> <li>200$</li> <li>300$</li> </ul>`

Дан следующий объект:

`{ user1: '100$', user2: '200$', user3: '300$', }`

С помощью `v-for` выведите на экран следующее:

`<ul> <li>user1 - 100$</li> <li>user2 - 200$</li> <li>user3 - 300$</li> </ul>`

Переделайте предыдущую задачу так, чтобы в конце каждой `li` стоял еще и порядковый номер элемента в объекте. Вот так:

`<ul> <li>user1 - 100$ - 0</li> <li>user2 - 200$ - 1</li> <li>user3 - 300$ - 2</li> </ul>`

Переделайте предыдущую задачу так, чтобы номера начинались не с нуля, а с единицы. Вот так:

`<ul> <li>user1 - 100$ - 1</li> <li>user2 - 200$ - 2</li> <li>user3 - 300$ - 3</li> </ul>`
← →
↑