Svelte 的每个块中的速记属性

2024-06-01 • 问答

我有一个 JSON 变量，它包含以下方式的属性：

// JSON variable defining attributes for elements to be created

let myElements = [
    {
        attr1: "myAttr1",attr2: "myAttr2",},{
        attr1: "myAttr4",attr2: "myAttr5",}
];

我想根据 JSON 变量中定义的属性使用 each 块呈现 HTML 元素，如下所示：

<-- Svelte Code -->

{#each myElements as myElement}
    <div {myElement.attr1} {myElement.attr2}>
    </div>
{/each}

以便它们以这种方式呈现：

<-- Desired Resultant HTML -->
<div attr1="myAttr1" attr="myAttr2"></div>
<div attr1="myAttr4" attr2="myAttr5"></div>

但是，当我在 HTML 标记中引用 {myElement.attr1} 等属性时，svelte 会显示“预期为 }”错误。可以这样使用速记属性吗？

fei2008e 回答：Svelte 的每个块中的速记属性

你可以使用解构

<script>
    let things = [
    {attr1:'a',attr2:'b'},{attr1:'ace',attr2:'bdd'},{attr1:'as',attr2:'bsd'},]
</script>

{#each things as {attr1,attr2}}
    <div {attr1} {attr2}>{attr1}</div>
{/each}

html javascript svelte

本文链接：https://www.f2er.com/29632.html

Svelte 的每个块中的速记属性

fei2008e 回答：Svelte 的每个块中的速记属性

大家都在问