Перебор массива объектов в 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>