سلام دوستان. توی فریمورک ویوو اگه یک لیست (آرایه یا آبجکت) داشته باشیم و بخوایم اون رو توی قسمت View نمایش بدیم، از دستور v-for استفاده میکنیم. استفاده از این دستور بصورت زیر هست:
<div id="app"> <p v-for="item in items"> {{ item }} </p> <!-- or --> <ul> <li v-for="user in users"> {{ user.name }} / {{ user.age }} </li> </ul> </div>
const app = new Vue({ el: '#app', data:{ items: [ 1, 2, 3 ], users: [ { name: 'Evan', age: 34 }, { name: 'Sarah', age: 27 }, ] } });
فرمت این دستور بصورت v-for="item in items" هست که توی اون items یک آرایه قابل پیمایش هست که توی قسمت data یا بطور کلی توی برنامه تعریف شده و قابل دسترسی هست. item هم یک اسم دلخواه برای المنتی از items هست که توی پیمایش فعلی اون رو داریم.
جالبه که بدونیم حلقه for...of هم توی v-for کار میکنه. ()
دستور v-for روی template
وقتی v-for رو یک المنت مثل تگ div اعمال میشه، خود اون المنت به همراه محتویات اون تکرار میشن:
<div v-for="user in users"> {{ user.name }} </div>
که خروجی کد بالا بصورت زیر هست:
<div id="app"> <div>Evan</div> <div>Sarah</div> </div>
اگه شرایطی داریم که میخوایم فقط محتویات المنت نمایش داده بشن، بجای div از template استفاده میکنیم:
<template v-for="user in users"> {{ user.name }} </template>
که خروجی این کد بصورت زیر هست:
<div id="app"> Evan Sarah </div>
v-for و آبجکتها
آبجکتها یا بطور کلی رو میتونیم توی v-for استفاده کنیم. آبجکتهای جاوااسکریپت قابل پیمایش هستن. آبجکت user رو در نظر بگیرین:
const app = new Vue({ el: '#app', data:{ user: { name: 'Jack', age: 19, state: 'Texas' } } });
اگه از دستور v-for برای نمایش user استفاده کنیم:
<div id="app"> <div v-for="info in user"> {{ info }} </div> </div>
خروجی بصورت زیر خواهد بود:
Jack 19 Texas