v-for
Misol
Massiv asosida sutemizuvchilar ro‘yxatini yaratish uchun v-for direktivasidan foydalanish:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive to create a list of mammals based on an array.</p>
<ul>
<li v-for="x in animals">{{ x }}</li>
</ul>
</template>
Quyida ko‘proq misollarni ko‘ring.
Ta’rif va qo‘llanilishi
v-for direktivasi ma’lumotlar manbai asosida bir nechta elementni render qilish uchun ishlatiladi.
v-for direktivasi "(item, key, index) in dataSource" sintaksisi bilan ishlatiladi, bu yerda:
- "item" taxallusi "dataSource" ichidagi elementni ifodalaydi.
- Agar ma’lumotlar manbai obyekt bo‘lsa, xususiyat nomlarini olish uchun "key" taxallusidan foydalanish mumkin.
- Agar ma’lumotlar manbai massiv yoki obyekt bo‘lsa, "index" taxallusidan foydalanish mumkin.
- "dataSource" siz aylanib chiqayotgan haqiqiy ma’lumotlar manbaining nomi bo‘lishi kerak.
"item", "key" va "index" taxalluslarining nomlarini o‘zingiz tanlashingiz mumkin, lekin ularning tartibi "item, key, index" bo‘ladi.
v-for direktivasi bilan ishlatish mumkin bo‘lgan ma’lumotlar manbalari quyidagilar:
| Ma’lumotlar manbai turi | Tafsilotlar | |
|---|---|---|
Array |
v-for massiv bo‘ylab aylanadi, har bir element va uning indeksini ajratib olib ishlatish mumkin. | Misolni ishga tushirish » |
| Object | v-for obyekt bo‘ylab aylanadi. Xususiyat nomlari, qiymatlari va indekslarini ajratib olib ishlatish mumkin. | Misolni ishga tushirish » |
number |
v-for ro‘yxatni render qiladi, bunda har bir element birdan boshlanadigan son bo‘lib, oxirgi son berilgan sonning o‘zi bo‘ladi. Har bir elementning indeksini ham ajratib olish mumkin. | Misolni ishga tushirish » |
string |
v-for string bo‘ylab aylanadi. Har bir belgi va uning indeksini ajratib olib ishlatish mumkin. | Misolni ishga tushirish » |
Iterable |
v-for iterable’lar bo‘ylab ham aylana oladi. Iterable’lar — Map va Set kabi Iterable protokolidan foydalanadigan qiymatlar. | Misolni ishga tushirish » |
Eslatma: Unumdorlikni optimallashtirish uchun Vue ma’lumotlar manbai o‘zgartirilganda v-for bilan yaratilgan elementlardan qayta foydalanadi. Bu g‘alati natijalarga olib kelishi mumkin (bu yerda tushuntirilgan). v-for’dan foydalanganda Vue elementlardan noto‘g‘ri qayta foydalanishining oldini olish uchun har bir elementni noyob tarzda belgilash maqsadida doim v-bind bilan maxsus key atributidan foydalanish kerak (6-misolga qarang).
Ko‘proq misollar
1-misol
Massiv asosida sutemizuvchilar ro‘yxatini render qilish va massivdagi har bir elementning indeksini ham olish uchun v-for direktivasidan foydalanish:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive to create a list of mammals, and the index of each mammal, based on an array.</p>
<ul>
<li v-for="(x, index) in animals">On index {{ index }}: "{{ x }}"</li>
</ul>
</template>
<script>
export default {
data() {
return {
animals: ['Tiger','Zebra','Wolf','Crocodile','Seal']
};
}
};
</script>
2-misol
Obyektdagi har bir xususiyatning nomi va qiymatini ajratib olib, xususiyatlar ro‘yxatini render qilish uchun v-for direktivasidan foydalanish:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive on an Object to create a list of the object properties and the respective property values.</p>
<ul>
<li v-for="(x, key) in animal">(Property name: value) = ({{ key }}: {{ x }})</li>
</ul>
</template>
<script>
export default {
data() {
return {
animal: {
name: 'Lion',
heightCM: 110,
weightKG: 150
}
};
}
};
</script>
3-misol
Son asosida ro‘yxat render qilish uchun v-for direktivasidan foydalanish:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive with number to render a list with that number of elements.</p>
<ul>
<li v-for="(x, index) in 10">Item: {{ x }}, index: {{ index }}</li>
</ul>
</template>
4-misol
Belgilardan iborat string bo‘ylab aylanish uchun v-for direktivasidan foydalanish:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive to loop through the characters in a string.</p>
<ul>
<li v-for="(x, index) in 'Ice cream'">Item: "{{ x }}", index: {{ index }}</li>
</ul>
</template>
5-misol
Iterable protokoli bilan yaratilgan obyekt bo‘ylab aylanish uchun v-for direktivasidan foydalanish:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive to render a list, based on an object created with the Iterable Protocol.</p>
<ul>
<li v-for="value in iterableObject">{{ value }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
iterableObject: this.createIterable(['City', 'Park', 'River'])
};
},
methods: {
createIterable(array) {
let currentIndex = -1;
return {
[Symbol.iterator]: function () {
return {
next: () => {
if (currentIndex < array.length - 1) {
currentIndex++;
return { value: array[currentIndex], done: false };
} else {
return { done: true };
}
}
};
}
};
}
}
};
</script>
6-misol
Stringdagi har bir belgi uchun bittadan div element render qilish uchun v-for direktivasidan foydalanish. v-for direktivasi bilan doim v-bind:key’dan foydalanish tavsiya etiladi:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive with 'v-bind:key' to render DIV elements, based on a string of characters.</p>
<div id="wrapper">
<div v-for="x in text" v-bind:key="x">{{ x }}</div>
</div>
</template>
<script>
export default {
data() {
return {
text: 'I love ice cream.'
};
}
};
</script>
<style>
#wrapper {
display: flex;
flex-wrap: wrap;
width: 280px;
}
#wrapper > div {
margin: 5px;
padding: 5px 10px;
border: solid black 1px;
background-color: lightgreen;
}
</style>
Tegishli sahifalar
JavaScript darsligi: JS iterable’lar
Vue darsligi: Vue v-for direktivasi
Vue darsligi: v-for bilan Vue komponentlari
Vue darsligi: v-for bilan Vue animatsiyalari
Vue ma’lumotnomasi: Vue key atributi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!