Svelte中使用#each块生成的按钮如何实现差异化样式设置

核心思路是利用#each循环提供的索引变量i，匹配元素位置后绑定对应样式即可，两种常用实现方式如下：

方法一：动态类绑定（推荐） #

样式与结构分离，后续维护更方便。
首先在组件的<style>块中定义好对应样式：

<style>
/* 默认按钮样式 */
button {
  padding: 6px 14px;
  border: 1px solid #ccc;
  cursor: pointer;
}
/* 第一个按钮的红色方形样式 */
.btn-red-square {
  background-color: red;
  color: #fff;
  border-radius: 0;
  border-color: red;
}
/* 第二个按钮的黄色圆形样式 */
.btn-yellow-round {
  background-color: yellow;
  border-radius: 999px;
  border-color: yellow;
}
</style>

然后修改模板中的循环逻辑，通过索引判断给对应按钮绑定类：

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

最后一个按钮索引为cats.length - 1，不需要绑定特殊类，自动继承默认样式即可。

方法二：内联样式绑定 #

适合少量临时自定义样式的场景，不需要单独写样式类：

<ul>
    {#each cats as { id, name }, i}
        <li><button 
            target="_blank" 
            href="https://www.youtube.com/watch?v={id}"
            style={
                i === 0 ? "background: red; border-radius: 0; color: #fff;" :
                i === 1 ? "background: yellow; border-radius: 999px;" :
                ""
            }
        >
            {i + 1}: {name}
        </button></li>
    {/each}
</ul>

补充说明 #

• 如果你需要的个性化样式不是按位置匹配，而是和猫咪的属性绑定，也可以直接把样式类名/样式配置存在cats数组的每一项中，循环时直接读取对应字段即可，扩展性更强。
• 原代码中给button元素加了href和target属性，这两个是链接标签<a>的原生属性，如果需要实现跳转功能，建议把button替换为<a>标签，或者给button添加点击跳转的事件逻辑。

内容的提问来源于stack exchange，提问作者ITM007