Vue Academy · درس

الشروط والحلقات

اعرض العناصر شرطيًا باستخدام v-if والقوائم باستخدام v-for

الشروط والحلقات درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

العرض الشرطي

يتيح لك Vue إظهار أجزاء من واجهة المستخدم أو إخفاءها استنادًا إلى البيانات.

يعرض v-if عنصرًا بشرط
يربط v-else-if وv-else الشروط
يتحكم v-show في مستوى الظهور

‏v-if

يعرض التوجيه v-if عنصرًا فقط عندما يكون التعبير صادقًا.

<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>

‏v-else-if وv-else

اربط الشروط باستخدام v-else-if وv-else. ويجب أن يتبعا v-if مباشرةً.

<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>

‏v-show

يعرض v-show العنصر دائمًا، لكنه يبدّل خاصية display في CSS.

<div v-show="isVisible">
  This div stays in the DOM,
  only display:none toggles.
</div>

‏v-if مقارنةً بـ v-show

يكمن الفرق الأساسي في ما يلي:

يضيف v-if العنصر إلى DOM أو يزيله منه بالكامل
يبقي v-show العنصر في DOM، ويبدّل display فقط

استخدم v-show للعناصر التي يجري تبديلها كثيرًا. واستخدم v-if عندما يتغير الشرط نادرًا أو يكون العنصر مكلفًا.

‏v-for على المصفوفات

يعرض التوجيه v-for قائمةً من خلال التكرار على مصفوفة.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->

‏v-for مع الفهرس

يمكن لـ v-for أيضًا تزويدك بـ فهرس كل عنصر.

<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

أهمية :key

وفّر دائمًا :key فريدًا عند استخدام v-for.

يساعد Vue على تتبع هوية كل عقدة
يتيح تحديثات DOM فعّالة وصحيحة
استخدم معرّفًا فريدًا ثابتًا، وليس فهرس المصفوفة عند إعادة ترتيب العناصر

<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

لماذا يُعد :key مهمًا؟

من دون مفتاح مناسب، قد يعيد Vue استخدام العناصر الخطأ عند تغير القائمة.

قد تحتفظ حقول الإدخال بالقيمة الخطأ
قد تتعطل الرسوم المتحركة
قد ترتبط الحالة بالصف الخطأ

يمنع المفتاح الفريد والثابت هذه الأخطاء.

‏v-for على الكائنات

يمكن لـ v-for التكرار على قيم خصائص كائن، مع إمكانية توفير المفتاح والفهرس.

<li v-for="(value, key) in userProfile" :key="key">
  {{ key }}: {{ value }}
</li>

<!-- userProfile = { name: "Ada", age: 36 } -->

دمج v-for والشروط

لتصفية قائمة، فضّل خاصية محسوبة بدل وضع v-if على العنصر نفسه الذي يحتوي على v-for.

<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
  {{ task.title }}
</li>

<!-- activeTasks is a computed that
     returns only unfinished tasks -->

تحقق سريع

اختبر مدى فهمك للشروط والحلقات.

مراجعة: الشروط والحلقات

تعلّمت العرض الشرطي وعرض القوائم:

يعرض v-if / v-else-if / v-else العناصر بشرط
يبدّل v-show مستوى الظهور فقط
يكرّر v-for على المصفوفات والكائنات
أضف دائمًا :key فريدًا
صفِّ القوائم باستخدام الخصائص المحسوبة

التالي: ربط السمات والأصناف.

الأسئلة الشائعة

هل درس «الشروط والحلقات» مجاني؟

نعم — نص درس «الشروط والحلقات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «الشروط والحلقات»؟

اعرض العناصر شرطيًا باستخدام v-if والقوائم باستخدام v-for تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «الشروط والحلقات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy