Vue v-for
Oddiy JavaScript bilan siz massiv asosida HTML elementlarini yaratishni xohlashingiz mumkin. Siz for-loopdan foydalanasiz va ichida siz elementlarni yaratishingiz, ularni sozlashingiz va keyin har bir elementni sahifangizga qo‘shishingiz kerak. Va bu elementlar massivdagi o‘zgarishlarga munosabat bildirmaydi.
Vue bilan siz ro‘yxatda yaratmoqchi bo‘lgan HTML elementidan boshlaysiz, atribut sifatida v-for bilan Vue misolidagi massivga murojaat qiling va qolganlari bilan Vue shug‘ullanishiga ruxsat bering. Va v-for bilan yaratilgan elementlar massiv o‘zgarganda avtomatik ravishda yangilanadi.
Ro‘yxatni ko‘rsatish
Vue-da massivni ko‘rsatish v-for direktivasi yordamida amalga oshiriladi, shuning uchun bir nechta HTML element for sikli yordamida yaratiladi.
Quyida v-for ishlatiladigan uchta bir oz farqli misollar keltirilgan.
Misol
Massiv elementlari asosida massivni ko‘rsatish.
<ol>
<li v-for="x in manyFoods">{{ x }}</li>
</ol>
O‘zingiz sinab ko‘ring »
Massiv orqali aylanish
Turli xil tasvirlarni ko‘rsatish uchun massivni aylantiring:
Misol
Vue misolidagi massiv asosida oziq-ovqat tasvirlarini ko‘rsatish.
<div>
<img v-for="x in manyFoods" v-bind:src="x">
</div>
O‘zingiz sinab ko‘ring »
Obyektlar massivi orqali aylanish
Obyektlar massivini aylantiring va obyekt xususiyatlarini ko‘rsating:
Misol
Vue misolidagi massiv asosida har xil turdagi oziq-ovqatlarning tasvirlari va nomlarini ko‘rsating.
<div>
<figure v-for="x in manyFoods">
<img v-bind:src="x.url">
<figcaption>{{ x.name }}</figcaption>
</figure>
</div>
O‘zingiz sinab ko‘ring »
Indeksni oling
Massiv elementining indeks raqami JavaScript for-looplarida haqiqatan ham foydali bo‘lishi mumkin. Yaxshiyamki, indeks raqamini Vue-da v-for-dan foydalanganda ham olishimiz mumkin.
Indeks raqamini v-for bilan olish uchun qavs ichida vergul bilan ajratilgan ikkita so‘zni berishimiz kerak: birinchi so‘z massiv elementi, ikkinchi so‘z esa ushbu massiv elementining indeksi bo‘ladi.
Misol
Vue misolidagi "manyFoods" massividagi elementlarning indeks raqami va oziq-ovqat nomini ko‘rsating.
<p v-for="(x, index) in manyFoods">
{{ index }}: "{{ x }}" <br>
</p>
O‘zingiz sinab ko‘ring »
Agar massiv elementlari obyekt bo‘lsa, biz massiv elementi indeksini ham, massiv elementining o‘zidan olingan ma’lumotlarni ham ko‘rsatishimiz mumkin:
Misol
Massiv elementi indeks raqamini va "manyFoods" massividagi obyektlardan matnni ko‘rsating.
<p v-for="(x, index) in manyFoods">
{{ index }}: "{{ x.name }}", url: "{{ x.url }}" <br>
</p>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!