第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY07-foreach也來幫忙

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

昨天教授大家怎麼抽組件以及如何傳遞資料給組件,但是如果有很多相同的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判斷式。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *