Vue'da Nesne Dizilerini Döngüye Almak

Şimdi nesne dizilerini döngüye almayı öğrenelim. Bir örnek üzerinden inceleyelim. Aşağıdaki dizi olduğunu varsayalım:

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

Dizimizi bir döngü ile gezelim ve her kullanıcı için ayrı bir paragrafta adını ve soyadını gösterelim:

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

Задание 1

Aşağıdaki dizi verilmiştir:

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

Bir döngü kullanarak aşağıdaki kodu oluşturun:

<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>

Задание 2

Aşağıdaki ürün dizisi verilmiştir:

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

Bir döngü kullanarak aşağıdaki kodu oluşturun:

<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>