ობიექტების გადარჩევა 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-ის საშუალებით გამოიტანეთ ეკრანზე შემდეგი:
<+html+>
- 100$
- 200$
- 300$
მოცემულია შემდეგი ობიექტი:
{
user1: '100',
user2: '200',
user3: '300',
}
v-for-ის საშუალებით გამოიტანეთ ეკრანზე შემდეგი:
<+html+>
- user1 - 100$
- user2 - 200$
- user3 - 300$
შეცვალეთ წინა ამოცანა ისე, რომ
თითოეული 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>
