iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0

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

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


上一篇
DAY06-組件與屬性
下一篇
DAY08-if else也可以喔
系列文
前端工程的另一個選擇 Svelte 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言