Svelte 3 - 如何循环每个块 X 次

Question

我希望找到一种方法在 Svelte 3 中迭代 #each 块一定次数。在 Vue 中我会做这样的事情：

<li v-for="i in 3"><!-- somecontent --></li>

但据我了解，Svelte 使用被#eached 的数组的 .length 属性来处理循环有很大不同。有什么方法可以在 Svelte 中完成这样的事情吗？

{#each 3 as i}
  <li><!-- somecontent --></li>
{/if}

Answer 1

您可以使用{#each ...}，例如：

{#each Array(3) as _, i}
    <li>{i + 1}</li>
{/each}

Answer 2

#each 标签可以循环任何长度为属性的内容，因此：

{#each {length: 3} as _, i}
    <li>{i + 1}</li>
{/each}

如果您愿意，也可以。

Answer 3

i 在 Svelte

中从 a 到 b 旅行时这样使用

{#each Array.from(Array(b+1).keys()).slice(a) as i }
    <h1>{i}</h1>                    
{/each}

示例（1 到 100）：

{#each Array.from(Array(100+1).keys()).slice(1) as i }
    <h1>{i}</h1>                    
{/each}

Answer 4

您可以使用脚本部分中的干净变量（嗯...用于分页）：

// script
export let numOfPages = 10
const pagesArray = Array.from({length: numOfPages}, (x, i) => i+1) // [1,2,3,4,5,6,7,8,9,10]

// template
{#each pagesArray as page}
    <li>{page}</li>
{/each}

Svelte 3 - 如何循环每个块 X 次

Svelte 3 - How to loop each block X amount of times

javascript

arrays

svelte

svelte-3