# Перебор массива объектов в Vue

Научимся теперь перебирать массив объектов. Посмотрим на примере. Пусть есть следующий массив:

`data() { return { users: [ { name: 'name1', surn: 'surn1', }, { name: 'name2', surn: 'surn2', }, { name: 'name3', surn: 'surn3', }, ] } }`

Давайте переберем наш массив циклом и для каждого юзера в отдельном абзаце будем выводить его имя и фамилию:

`<template> <p v-for="user in users"> {{ user.name }} {{ user.surn }} </p> </template>`

Дан следующий массив:

`data() { return { hrefs: [ {href: '1.html', text: 'text1'}, {href: '2.html', text: 'text2'}, {href: '3.html', text: 'text3'}, ] } }`

С помощью цикла сформируйте следующий код:

`<ul> <li><a href="1.html">text1</a></li> <li><a href="2.html">text2</a></li> <li><a href="3.html">text3</a></li> </ul>`

Дан следующий массив с продуктами:

`data() { return { products: [ { name: 'product1', price: 100, quantity: 5 }, { name: 'product2', price: 200, quantity: 4 }, { name: 'product3', price: 300, quantity: 3 }, ] } }`

С помощью цикла сформируйте следующий код:

`<table> <tr> <td>product1</td> <td>100</td> <td>5</td> </tr> <tr> <td>product2</td> <td>200</td> <td>4</td> </tr> <tr> <td>product3</td> <td>300</td> <td>3</td> </tr> </table>`
← →
↑