如何根据 #each 中解压的值使用 Svelte 更改 Tailwind CSS 背景颜色？

Question

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

我在 Svelte 中生成了带有 #each 循环的 table 行。（每行 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 中解压的值更改顺风背景颜色？

Answer 1

我认为您应该改变解决该问题的方法。您可以使用 class:name 元素指令。

A class: directive provides a shorter way of toggling a class on an element.

示例

{#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}

repl link

Answer 2

我建议有一个函数可以根据 batteryValue 返回背景颜色，例如：

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

...然后在节点的class:

中消费

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

看看REPL。

如何根据 #each 中解压的值使用 Svelte 更改 Tailwind CSS 背景颜色？

How to change Tailwind CSS background color with Svelte, based on a value unpacked in #each?

javascript

svelte

tailwind-css

tailwind-ui