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

Posted 2023-02-19

【中文标题】Svelte 3 - 如何循环每个块 X 次

【英文标题】：Svelte 3 - How to loop each block X amount of times

【发布时间】：2020-02-01 10:41:31

【问题描述】：

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

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

但据我了解，Svelte 使用 #eached 数组的 .length 属性处理循环的方式大不相同。有什么方法可以在 Svelte 中实现这样的效果吗？

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

【参考方案1】：

你可以使用#each ...，比如：

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

【讨论】：

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

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

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

【参考方案2】：

#each 标签可以循环任何带有长度属性的东西，所以：

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

如果您愿意，也可以使用。

【讨论】：

这个答案更适合我的需要，因为对于长时间的迭代，我认为最好不要创建一个 looooong 数组。

【参考方案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

【讨论】：

非常酷，但对 1-X 没有那么有用，因为您可以使用其他更简单的方法之一。但这有一些有趣的分页可能性svelte.dev/repl/509ac9d542644544a282966aef6879e1?version=3.44.3