آموزش حلقه for در vue.js

چه زمانی از دستور v-for استفاده می کنیم ؟

فرض کنید یک لیست داریم و بخوایم به تعداد آیتم های درون اون لیست ، گردش کنیم و داده های اون رو نمایش بدیم برای این کار از دستور v-for استفاده می کنیم ، نحوه نوشتن این دایرکتیو به صورت زیر است :

"v-for = "item in items که در اون items لیست ما هست که درون برنامه تعریف شده و item هم یک اسم دلخواهه برای گردش در items

به مثال زیر توجه کنید :

<div id="app">
    <ul>
    <li v-for=" name in names ">{{ name }}</li>
    </ul>
</div>

data: {
    names: ['ali', 'mohamad', 'sara']
  }

همانطور که میبینید خصوصیتی داریم به نام names که یک آرایه است بع از آن بر روی تگ li از دایرکتیو v-for استفاده می کنیم و یک نام دلخواه برای آیتم های حلقه خود انتخاب می کنیم در این جا من از نام name استفاده کردم پس از آن کلید واژه in قرار می گیرد که همیشه ثابت است و در اخر نام خصوصیتی که درون کد های vue خود ایجاد کرده ایم را قرار می دهیم.

نتیجه کد بالا به صورت زیر است :

ali

mohamad

sara

نمایش ایندکس ها در لیست

برای نمایش ایندکس ، در کنار ایتم های لیست خود به روش زیر عمل می کنیم :

<div id="app">
    <ul>
        <li v-for="(name, i) in names">{{name}} ({{i}})</li>
    </ul>
    <template v-for="(name, index) in names">
        <h1>{{ name }} </h1>
        <p>{{ index}} </p>
    </template>
</div>

حلقه for در اشیاء

کد زیر را در نظر بگیرید:

data: {
    cars: [
        { name: 'bmw', color: 'green' },
      { name: 'benz', color: 'blue' }
    ]
  }

برای گردش در شی بالا به روش زیر عمل می کنیم :

<div id="app">
    <ul>
        <li v-for=" car in cars "> {{ car.name}} </li>
    </ul>
</div>

خروجی این کد به شکل زیر است:

Bmw

Benz

همانطور که مشاهده می کنید car عضو از آرایه cars است که یک شیء می باشد و برای دسترسی به خصوصیات درون این شی از دات (.) استفاده می کنیم ، در این مثال car.name را مشاهده می کنید.

به قطعه کد زیر دقت کنید :

    <ul>
        <li v-for=" car in cars ">
            <div v-for="(value, key, i) in car "> {{key}}: {{ value }} ({{i}}) </div>
        </li>
    </ul>

این مثال مانند مثال قبل است اما کمی پیچیده تر و خروجی آن به شکل است :

(0)name: bmw

(1) color: green

(0)name: benz

(1) color: blue