javascript / beginner
Snippet
Rendering Lists with Each Blocks
To loop through an array and render HTML for each item, Svelte uses the {#each} block. It is clean and avoids manual map() calls in the template.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
<script>let colors = ['Red', 'Green', 'Blue'];</script><ul>{#each colors as color}<li>{color}</li>{/each}</ul>
svelte
Breakdown
1
{#each colors as color}
Starts a loop over the 'colors' array, assigning each item to the variable 'color'.
2
{/each}
Closes the loop block.