{#if} {#else if} {#else}
แสดงมาร์กอัปตามเงื่อนไขโดยอิงจากนิพจน์ JavaScript
{#if} {#else if} {#else} เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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 โดยไม่มี else ได้ เนื่องจาก else เป็นส่วนที่ไม่บังคับ
ตรวจสอบอย่างรวดเร็ว
บล็อก if ของ Svelte ปิดอย่างไร
สรุปทบทวน
ใช้ {#if}/{:else if}/{:else}/{/if} สำหรับการแสดงผลแบบมีเงื่อนไข นิพจน์เป็น JS ปกติ
คำถามที่พบบ่อย
บทเรียน “{#if} {#else if} {#else}” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “{#if} {#else if} {#else}” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “{#if} {#else if} {#else}”
แสดงมาร์กอัปตามเงื่อนไขโดยอิงจากนิพจน์ JavaScript คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “{#if} {#else if} {#else}” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- {#if} {#else if} {#else}
- {#each} พร้อมดัชนีและคีย์
- {#key} สำหรับบังคับให้แสดงผลใหม่
- {#each} แบบซ้อนและการอัปเดตตามคีย์