v-for (v-for)
دایرکتیو v-for برای «رندر لیست (List Rendering)» است. یعنی از روی آرایه، چند عنصر می سازد. داده عوض شود، لیست هم به صورت واکنش گرا عوض می شود.
لیست ها با v-for
با v-for روی آرایه می چرخی و برای هر آیتم یک تگ می سازی.
<ol>
<li v-for="x in manyFoods">{{ x }}</li>
</ol>
حلقه روی آرایه تصاویر با v-for
می توانی آدرس تصویرها را از آرایه بگیری و نمایش بدهی.
<div>
<img v-for="x in manyFoods" v-bind:src="x">
</div>
حلقه روی آرایه اشیا
اگر هر آیتم شیء باشد، به ویژگی هایش دسترسی داری.
<div>
<figure v-for="x in manyFoods">
<img v-bind:src="x.url">
<figcaption>{{ x.name }}</figcaption>
</figure>
</div>
گرفتن ایندکس (Index) در v-for
با نوشتن دو نام در پرانتز، آیتم و ایندکس را می گیری.
<p v-for="(x, index) in manyFoods">
{{ index }}: "{{ x }}" <br>
</p>
برای اشیا هم می توانی هم ایندکس را نشان بدهی و هم ویژگی ها را.
<p v-for="(x, index) in manyFoods">
{{ index }}: "{{ x.name }}", url: "{{ x.url }}" <br>
</p>
گام های عملی
- یک آرایه ساده بساز.
v-forرا روی تگ لیست بگذار.- داده را تغییر بده و نتیجه را ببین.
جمع بندی سریع
- v-for از روی آرایه عنصر می سازد.
- با تغییر آرایه، خروجی هم تغییر می کند.
- برای اشیا، از ویژگی ها استفاده کن.
- ایندکس را با پرانتز بگیر.
ادامه یادگیری: v-show برای نمایش شرطی و رویدادها برای تعامل کاربر. همچنین عبارت v-for در این صفحه تمرکز اصلی است.