قوالب Svelte: المنطق الشرطي

تعرف على كيفية العمل مع القوالب في Svelte وعلى وجه الخصوص كيفية استخدام الشرطية

توفر لك أي لغة نماذج جيدة للويب شيئين على الأقل: بنية شرطية وحلقة.

Svelte ليس استثناءً ، وفي هذا المنشور سأبحث في الهياكل الشرطية.

تريد أن تكون قادرًا على النظر إلى قيمة / تعبير ، وإذا كان هذا يشير إلى قيمة حقيقية ، فافعل شيئًا ، وإذا كان هذا يشير إلى قيمة خاطئة ، فافعل شيئًا آخر.

يوفر لنا Svelte مجموعة قوية جدًا من هياكل التحكم.

الأول هولو:

{#if isRed}
	<p>Red</p>
{/if}

هناك فرصة{#if}ونهاية{/if}. يتحقق الترميز الافتتاحي من صحة القيمة أو العبارة. في هذه الحالةisRedيمكن أن يكون منطقيًا بامتدادtrueالقيمة:

<script>
let isRed = true
</script>

السلسلة الفارغة خاطئة ، لكن السلسلة التي بها بعض المحتوى صحيحة.

الرقم 0 خاطئ ، لكن الرقم> 0 صحيح.

القيمة المنطقيةtrueهو صريح ، بالطبع ، وfalseغير صحيح.

إذا لم يتم استيفاء الترميز الافتتاحي (تم تقديم قيمة خاطئة) ، فلن يحدث شيء.

للقيام بشيء آخر إذا لم يكن ذلك راضياً ، نستخدم الاسم المناسبelseبيان:

{#if isRed}
	<p>Red</p>
{:else}
	<p>Not red</p>
{/if}

يتم عرض الكتلة الأولى في القالب أو الثانية. ليس هناك خيار آخر.

يمكنك استخدام أي تعبير JavaScript في ملفifشرط الحظر ، لذلك يمكنك إلغاء خيار باستخدام!المشغل أو العامل:

{#if !isRed}
	<p>Not red</p>
{:else}
	<p>Red</p>
{/if}

الآن ، داخلelseقد ترغب في التحقق من وجود حالة إضافية. هذا حيث{:else if somethingElse}يأتي بناء الجملة:

{#if isRed}
  <p>Red</p>
{:else if isGreen}
  <p>Green</p>
{:else}
  <p>Not red nor green</p>
{/if}

يمكنك الحصول على العديد من هذه الكتل ، وليس واحدة فقط ، ويمكنك تداخلها. إليك مثال أكثر تعقيدًا:

{#if isRed}
  <p>Red</p>
{:else if isGreen}
  <p>Green</p>
{:else if isBlue}
  <p>It is blue</p>
{:else}
  {#if isDog}
    <p>It is a dog</p>
  {/if}
{/if}

تحميل مجانيكتيب Svelte


المزيد من البرامج التعليمية svelte: