3

我是 Svelte 和 Tailwind 的初学者，想避免 XY 问题，所以这是我的目标：

#each我在 Svelte 中生成带有循环的表格行。（每行 6 个值）。我现在想根据一个值（电池电量）有条件地为该行的背景着色。

我的想法是根据这个值有条件地渲染不同的标签。像这样：

        {#each allLZ as {id, name, mac, status, lastcontact, battery}, i}
        
        {#if battery > 70}
          <tr class="bg-green-50">
        {:else if battery > 40}
          <tr class="bg-yellow-50">
        {:else }
          <tr class="bg-red-50">
        {/if}

但这不起作用，因为 Svelte 希望看到标签关闭为完整的元素，而不是零碎的代码，足够公平。

那么有没有一种好方法可以根据解压缩的值更改顺风背景颜色#each？

4

2 回答 2

2

我会建议有一个功能，根据类似的给你背景颜色batteryValue：

let getBatteryColor = (batteryValue) => {
    if (batteryValue > 70) return 'green'
    if (batteryValue > 40) return 'yellow'
    return 'red'
}

...然后在节点的类中使用它：

<tr class={`bg-${getBatteryColor(batteryValue)}`}>
    <td>...</td>
</tr>

看看REPL。

于 2022-02-08T13:51:04.430 回答
1

我认为你应该改变这个问题的方法。您可以使用class:nameelement 指令。

A class: 指令提供了一种在元素上切换类的更短的方法。

例子

{#each allLZ as {id, name, mac, status, lastcontact, battery}, i}
<tr
  class:bg-red-500={battery < 39}
  class:bg-yellow-500={battery >= 40 && battery < 70}
  class:bg-green-500={ battery >= 70}>

    <td>{name}/{battery}</td>

</tr>
{/each}

重新链接

于 2022-02-08T11:59:17.000 回答