Closed yuwanli closed 5 years ago
{#each expression as name}...{/each}
{#each expression as name, index}...{/each}
{#each expression as name, index (key)}...{/each}
{#each expression as name}...{:else}...{/each}
遍历一个列表数据,可以使用each来实现。
each
<h1>Shopping list</h1> <ul> {#each items as item} <li>{item.name} x {item.qty}</li> {/each} </ul>
每一个each块 ,都可指定index 。 index的值和 array.map(...) 的回调方法的第二个参数相同。
index
array.map(...)
{#each items as item, i} <li>{i + 1}: {item.name} x {item.qty}</li> {/each}
如果你指定了key(列表项的唯一标志),Svelte 会在数据发生变更的时候,对列表进行 diff(而不只是在结尾添加或删除项)。 key可以是任何对象,但是推荐使用字符或数字,因为它们在对象发生变化的时候仍保持不变。
key
{#each items as item, i (item.id)} <li>{i + 1}: {item.name} x {item.qty}</li> {/each}
你可以在each中使用解构的语法。
{#each items as { id, name, qty }, i (id)} <li>{i + 1}: {name} x {qty}</li> {/each}
每个each也可以有一个{:else}部分,如果列表为空,则会渲染该部分的内容。
{#each todos as todo} <p>{todo.text}</p> {:else} <p>No tasks today!</p> {/each}
@Copyes @tgxpuisb @dujuncheng @daixinye
Each
遍历一个列表数据,可以使用
each
来实现。每一个
each
块 ,都可指定index
。index
的值和array.map(...)
的回调方法的第二个参数相同。如果你指定了
key
(列表项的唯一标志),Svelte 会在数据发生变更的时候,对列表进行 diff(而不只是在结尾添加或删除项)。key
可以是任何对象,但是推荐使用字符或数字,因为它们在对象发生变化的时候仍保持不变。你可以在
each
中使用解构的语法。每个
each
也可以有一个{:else}部分,如果列表为空,则会渲染该部分的内容。