苗条#每种风格

Question

我正在使用类似于以下代码的 each 块。我有一个迭代的项目数组，然后为所有项目创建一个按钮。

<ul>
    {#each cats as { id, name }, i}
        <li><button target="_blank" href="https://www.youtube.com/watch?v={id}">
            {i + 1}: {name}
        </button></li>
    {/each}
</ul>

但我想对按钮进行独特的风格化。例如，我希望第一个按钮是红色和方形的，下一个是黄色和圆形的，最后一个是正常的。我将如何将它添加到上面的示例中？

Answer 1

我认为有几种方法可以做到这一点：

使用nth-child() 选择器为每个按钮设置不同的样式：

li:nth-child(1) > button { color: red; }
li:nth-child(2) > button { color: green; }

根据索引从数组中添加不同的类

<script>
  const classes = ['green', 'red', 'yellow']
</script>
{#each item as item, i}
  <li class={classes[i]}>...</li>
{/each}

（如果你想让类重复，你可以在这里使用模运算符）

最后一种方法是从函数中检索类（这与第一种非常相似，但更灵活）

<script>
  function getClasses(index) {
    return 'something here';
  }
</script>
{#each item as item, i}
  <li class={getClasses(i)}>...</li>
{/each}

如果你不想使用类，你当然可以用样式做类似的事情

<script>
  function getStyle(index) {
    return 'something here';
  }
</script>
{#each item as item, i}
  <li style={getStyle(i)}>...</li>
{/each}