{#if} و{#else if} و{#else}
اعرض العلامات بصورة شرطية استنادًا إلى تعبيرات JavaScript
{#if} و{#else if} و{#else} درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
الكتل الشرطية
تشبه الشروط في Svelte شِيفرات Handlebars: {#if} و{:else if} و{:else}، وتُغلق باستخدام {/if}.
مثال أساسي
اعرضوا فرعًا أو فرعًا آخر بناءً على تعبير منطقي.
{#if loggedIn}
<p>Welcome back!</p>
{:else}
<p>Please sign in.</p>
{/if}عدة فروع
سلسلوا الشروط باستخدام {:else if} للتعامل مع شروط متعددة.
{#if score > 90}
<p>A</p>
{:else if score > 75}
<p>B</p>
{:else}
<p>C</p>
{/if}التعبيرات هي JavaScript
يمكن أن يكون الشرط أي تعبير JavaScript صالح.
{#if items.length > 0 && !isLoading}وسم الإغلاق
أغلقوا دائمًا باستخدام {/if}. ويؤدي عدم الإغلاق إلى أخطاء في الترجمة.
if متداخل
يمكن تداخل الشروط بحرية داخل كتل Svelte الأخرى وعناصر HTML.
{#if user}
{#if user.admin}
<Admin />
{/if}
{/if}لا توجد switch
لا تحتوي Svelte على كتلة switch مضمنة. استخدموا {:else if} المتسلسلة أو احسبوا قيمة متغير.
الدمج مع each
يمكنكم تغليف قائمة داخل شرط لتصييرها عند وجود عناصر فقط.
{#if items.length}
{#each items as item}<li>{item}</li>{/each}
{/if}التفاعلية من الداخل
الشرط تفاعلي: كلما تغيرت تبعياته، تعيد Svelte تقييمه وتبدّل الفروع.
الرسوم المتحركة في if
يمكنكم إرفاق توجيهات transition: بالعناصر داخل كتل if لتحريك الدخول والخروج.
الفروع الفارغة
يمكن أن تحتوي كتلة if على if فقط من دون else. إذ إن else اختيارية.
تحقق سريع
كيف تُغلق كتلة if في Svelte؟
مراجعة
استخدموا {#if}/{:else if}/{:else}/{/if} للتصيير الشرطي. والتعبير هو JavaScript عادي.
الأسئلة الشائعة
هل درس «{#if} و{#else if} و{#else}» مجاني؟
نعم — نص درس «{#if} و{#else if} و{#else}» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «{#if} و{#else if} و{#else}»؟
اعرض العلامات بصورة شرطية استنادًا إلى تعبيرات JavaScript تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «{#if} و{#else if} و{#else}»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- {#if} و{#else if} و{#else}
- {#each} مع الفهرس والمفتاح
- {#key} لفرض إعادة التصيير
- {#each} المتداخلة والتحديثات المعتمدة على المفتاح