آموزش برنامه نویسی - تاپ دمی

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

ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 2 دقیقه
آموزش حلقه 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

این مقاله برای شما چقدر مفید بود ؟

14 آذر، 1400

اشتراک گزاری مقاله

مقالات مشابه

آشنایی با کامپوننت‌ ها در vue js

آشنایی با کامپوننت‌ ها در vue js

در این مقاله سعی داریم به صورت قابل درک و ساده شما را با شکل و ساختار کامپوننت‌ ها در فریم...

ادامه مطلب
بررسی computed ، methods و watcher در Vue3

بررسی computed ، methods و watcher در Vue3

در این مقاله سعی کردم به صورت خلاصه و مفید همراه با مثال به بررسی computed ، methods و wa...

ادامه مطلب
آموزش دایرکتیوها در vue.js

آموزش دایرکتیوها در vue.js

در این مقاله به بررسی و معرفی انواع directive ها در vue می پردازیم و با بیان مثال ، با...

ادامه مطلب