Վիյուում օբյեկտների զանգվածի վերադասավորում
Հիմա եկեք սովորենք վերադասավորել օբյեկտների զանգված: Դիտարկենք օրինակով: Ենթադրենք ունենք հետևյալ զանգվածը:
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>
