Vue.js-کابردها-کتابخانه جاوااسکریپتدوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

دایرکتیوهای شرطی و تکرار در Vue.js

در Vue.js، دو نوع دایرکتیو برای مدیریت نمایش یا تکرار المان‌ها وجود دارد: دایرکتیوهای شرطی و دایرکتیوهای تکرار. این دایرکتیوها به شما این امکان را می‌دهند که با استفاده از داده‌ها، نحوه نمایش المان‌ها در DOM را کنترل کنید.

دایرکتیوهای شرطی در Vue.js

دایرکتیوهای شرطی به شما این امکان را می‌دهند که بر اساس شرایط خاصی، المان‌ها را در DOM نمایش یا مخفی کنید.

۱. v-if

دایرکتیو v-if برای نمایش یا مخفی کردن المان‌ها بر اساس یک شرط استفاده می‌شود. زمانی که شرط برقرار باشد، المان در DOM قرار می‌گیرد، در غیر این صورت حذف می‌شود.

مثال استفاده از v-if:
<template>
  <div>
    <p v-if="isVisible">این متن تنها زمانی نمایش داده می‌شود که isVisible درست باشد.</p>
    <button @click="toggleVisibility">تغییر وضعیت نمایش</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isVisible: true
    }
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
}
</script>

در اینجا:

  • وقتی که isVisible برابر با true باشد، متن نمایش داده می‌شود. اگر false شود، متن حذف می‌شود.

۲. v-else

دایرکتیو v-else برای تعریف حالت "دیگر" بعد از یک v-if یا v-if استفاده می‌شود. این دایرکتیو باید بلافاصله پس از v-if قرار بگیرد.

مثال استفاده از v-else:
<template>
  <div>
    <p v-if="isVisible">این متن وقتی نمایش داده می‌شود که isVisible درست باشد.</p>
    <p v-else>این متن وقتی نمایش داده می‌شود که isVisible غلط باشد.</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isVisible: false
    }
  }
}
</script>

در اینجا:

  • اگر isVisible برابر با true باشد، متن اول نمایش داده می‌شود.
  • اگر isVisible برابر با false باشد، متن دوم نمایش داده می‌شود.

۳. v-else-if

دایرکتیو v-else-if به شما این امکان را می‌دهد که چندین شرط را بررسی کنید. این دایرکتیو باید پس از v-if قرار بگیرد و می‌تواند به‌عنوان یک جایگزین برای چندین if استفاده شود.

مثال استفاده از v-else-if:
<template>
  <div>
    <p v-if="status === 'loading'">در حال بارگذاری...</p>
    <p v-else-if="status === 'success'">بارگذاری با موفقیت انجام شد.</p>
    <p v-else>بارگذاری ناموفق بود.</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      status: 'loading'
    }
  }
}
</script>

در اینجا:

  • بر اساس مقدار status، یکی از پیام‌ها به نمایش درمی‌آید.

دایرکتیوهای تکرار در Vue.js

دایرکتیوهای تکرار به شما این امکان را می‌دهند که عناصر را بر اساس داده‌ها تکرار کنید. این دایرکتیوها به‌ویژه برای نمایش لیست‌ها و مجموعه‌های داده مفید هستند.

۴. v-for

دایرکتیو v-for برای تکرار یک عنصر یا مجموعه از عناصر استفاده می‌شود. این دایرکتیو به شما این امکان را می‌دهد که داده‌ها را از یک آرایه یا شیء در یک لیست تکرار کنید.

مثال استفاده از v-for:
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: ['آیتم 1', 'آیتم 2', 'آیتم 3']
    }
  }
}
</script>

در اینجا:

  • v-for="item in items" باعث می‌شود که هر آیتم موجود در آرایه items در یک <li> تکرار شود.
  • برای جلوگیری از مشکلات در render، از :key="item" برای هر تکرار استفاده می‌شود.

۵. v-for با شاخص (Index)

در صورتی که نیاز دارید شاخص هر عنصر در لیست را نیز داشته باشید، می‌توانید از پارامتر شاخص (index) در دایرکتیو v-for استفاده کنید.

مثال استفاده از v-for با شاخص:
<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ index + 1 }}: {{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: ['آیتم 1', 'آیتم 2', 'آیتم 3']
    }
  }
}
</script>

در اینجا:

  • v-for="(item, index) in items" به شما این امکان را می‌دهد که به علاوه بر داده، به شاخص (index) هر آیتم نیز دسترسی پیدا کنید.

۶. v-for با شیء

دایرکتیو v-for همچنین می‌تواند برای تکرار عناصر در یک شیء استفاده شود. در این حالت، شما می‌توانید کلیدها و مقادیر هر شیء را برای هر تکرار دریافت کنید.

مثال استفاده از v-for با شیء:
<template>
  <div>
    <ul>
      <li v-for="(value, key) in person" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      person: {
        name: 'محمد',
        age: 30,
        job: 'مطور'
      }
    }
  }
}
</script>

در اینجا:

  • v-for="(value, key) in person" برای تکرار کلیدها و مقادیر موجود در شیء person استفاده شده است.

جمع‌بندی

  • دایرکتیوهای شرطی:
    • v-if: برای نمایش یا مخفی کردن المان‌ها بر اساس شرط.
    • v-else-if: برای تعریف شرایط اضافی در کنار v-if.
    • v-else: برای ارائه حالت پیش‌فرض زمانی که شرط v-if برقرار نباشد.
  • دایرکتیوهای تکرار:
    • v-for: برای تکرار عناصر از یک آرایه یا شیء.
    • امکان استفاده از شاخص (index) و دسترسی به مقادیر در شیء یا آرایه برای ایجاد لیست‌های داینامیک و واکنش‌گرا.