如果有很多重複一樣的東西該怎麼辦

昨天教授大家怎麼抽組件以及如何傳遞資料給組件，但是如果有很多相同的html或是同樣的組件要如何處理呢？今天就來告訴大家在 svelte 怎麼辦。

foreach迴圈

相信學習任何語言都會有 foreach 因為這是讓工程師做事有效率的方法之一，當然除了 javascript 有 foreach 之外， svelte 也有自己的語法在 html 上跑迴圈他的語法如下。

{#each items as item}
    <li>{item.name} x {item.qty}</li>
{/each}

簡單說明就是 #each 序列 as 序列中的每個物件 當開頭 /each 當結尾，中間夾著 html 語法，使用變數就如同之前一般用 即可。

就因為中間夾著html語法，所以組件也可以直接用如下所示。

{#each nameList as name}
    <HelloWorld ｛name} />
{/each}

如此就可以完成重複的 html 了。

小結

今天教授大家如何使用 svelte 的 foreach ，但是如果陣列內有資料不想要呈現又該如何處理呢？待明天再教授大家 if 判斷式。