v-for (v-for)
دایرکتیو «v-for» برای ساخت لیست از داده ها است. «دایرکتیو (Directive)» یعنی دستور مخصوص قالب. اینجا مانند ردیف های دفتر حضور، از روی داده ها تکرار می زنیم. بنابراین هر مورد، یک آیتم می سازد.
تعریف و نحو v-for
الگو چنین است: (item, key, index) in dataSource. «آیتم (item)» یک مقدار است. «کلید (key)» نام ویژگی در شیء است. «ایندکس (index)» شماره خانه است. ترتیب نام ها همیشه «item, key, index» می ماند.
نکته: برای جلوگیری از تداخل، همیشه از v-bind:key استفاده کن تا هر عنصر یکتا باشد.
مثال 1: آرایه با ایندکس
یک آرایه از پستانداران را لیست می کنیم. سپس ایندکس هر مورد را هم نشان می دهیم.
<template>
<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: شیء با نام ویژگی و مقدار
روی یک شیء تکرار می زنیم. نام ویژگی و مقدارش را برمی داریم.
<template>
<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: عدد به عنوان منبع
یک عدد می دهیم. سپس همان تعداد آیتم تولید می شود. ایندکس هم داریم.
<template>
<ul>
<li v-for="(x, index) in 10">Item: {{ x }}, index: {{ index }}</li>
</ul>
</template>
مثال 4: کلید یکتا با v-bind:key
برای هر کاراکتر یک div می سازیم. سپس با key هر کدام یکتا می شود.
<template>
<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>
گام های عملی
- منبع داده را مشخص کن.
v-forرا روی تگ مناسب بگذار.- الگوی (item, key, index) را درست بچین.
- برای هر عنصر، یک
keyیکتا بده.
نکته: برای دایرکتیوهای بیشتر، صفحه دایرکتیوها را ببین. همچنین اتصال ویژگی را در v-bind تمرین کن. عبارت حلقه v-for را هم در سایت دنبال کن.
جمع بندی سریع
v-forاز هر منبع، لیست می سازد.- نام ها آزادند؛ ترتیبشان ثابت است.
- همیشه از
v-bind:keyاستفاده کن. - آرایه، شیء، عدد و رشته پشتیبانی می شود.