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

Question

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

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

但是我了解到Svelte处理循环的方式与使用 #each 的数组 .length 属性大不相同。在Svelte中有没有类似这样的方法？

然而，据我了解，Svelte处理循环的方式与使用 #each 的数组 .length 属性大不相同。在Svelte中是否有一种类似的方法可以实现这样的效果呢？

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

- JHeth

Answer 1

#each 标签可以循环任何具有长度属性的内容，所以：

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

如果您更喜欢，这也是可行的。

- Antony Jones

---

我认为这个答案更适合我的需求，因为在长迭代中最好不要创建一个很长的数组。 - Mert Gülsoy

同意，我认为这是更好的解决方案。 - Olivier Refalo

文档：https://svelte.dev/docs#template-syntax-each "您可以使用each块来迭代任何数组或类似数组的值 - 也就是说，任何具有length属性的对象。" - Robert

Answer 2

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

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

- CD..

---

有没有办法在数字变量更改时（例如从3到5）重新呈现此#each块？我想根据先前的用户输入呈现一定数量的表单项。例如：你有多少辆车？-->为每个汽车品牌/型号创建的文本输入数量。 - Doomd

@Doomd：是的，看一个例子：https://svelte.dev/repl/fef2db8c70064c49913a6608ebf633b9?version=3.18.2 - CD..

如果您要这样做，请键入@doomd，以便Svelte可以跟踪添加/删除：{#each x as _, i (x.id)}或类似的东西。 - Antony Jones

Answer 3

在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}

- sk shahriar ahmed raka

---

非常酷，对于1-X来说并不是很有用，因为你可以使用其他更简单的方法。但是这对于分页有一些有趣的可能性 https://svelte.dev/repl/509ac9d542644544a282966aef6879e1?version=3.44.3 - JHeth

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}

- MaxWall