Svelte中的动态html属性分配

Question

我正在使用Svelte进行个人web开发，代码片段如下:

<AccordionItem open>
<span slot="header">随机TAG</span>
<p class="mb-2 text-gray-500 dark:text-gray-400 text-sm">
{#each tags as t}
{#if t.tc<3}
<span
class="dark:text-red-600 text-gray-600 font-bold text-sm"
><a href="/books/tag/{t.tag}" target="_self">{t.tag}</a></span> ({t.tc}) &nbsp;  
{:else if t.tc<6}
<span
class="dark:text-red-600 text-gray-600 font-bold text-base"
><a href="/books/tag/{t.tag}" target="_self">{t.tag}</a></span> ({t.tc}) &nbsp;  
{:else if t.tc<10}
<span
class="dark:text-red-600 text-gray-600 font-bold text-lg"
><a href="/books/tag/{t.tag}" target="_self">{t.tag}</a></span> ({t.tc}) &nbsp;
{:else}
<span
class="dark:text-yellow-600 text-red-600 font-bold text-xl"
><a href="/books/tag/{t.tag}" target="_self">{t.tag}</a></span> ({t.tc}) &nbsp;
{/if}

{/each}
<span
class="dark:text-red-600 text-gray-600 font-bold"
></span
>
</p>
</AccordionItem>

我想在这里实现的关键视觉效果是:基于t.tc计数，应用不同的text-??(甚至更多，不同的颜色)到标签文本显示。

现在我使用一堆if-else if-else块来实现这一点。有更好的方法吗?

例如，我可以根据t.tc(计数)分配let textsize=??，然后将span元素属性设置为<span class='... {textsize}'>。

Answer 1

您可以创建一个字典，将不同的范围映射到类名和一个函数，以确定类别/范围名称，因为您没有具体的值。例如

function category(count) {
return count < 3 ? 'a' :
count < 6 ? 'b' :
...;
}
const categoryClasses = {
a: 'dark:text-red-600 text-gray-600 font-bold text-sm',
b: 'dark:text-red-600 text-gray-600 font-bold text-base',
// ...
}

(当然，名称应该选择得更有意义。)

<span class="... {categoryClasses[category(t.tc)]}" ...

您也可以将所有内容组合到一个函数中并直接返回类，如果有更多的类/它们不被分解，这行可能会变得有点长。

function classesForTc(count) {
return count < 3 ? 'dark:text-red-600 text-gray-600 font-bold text-sm' :
count < 6 ? 'dark:text-red-600 text-gray-600 font-bold text-base' :
// ...
}

<span class="... {classesForTc(t.tc)}"

请注意，如果像Tailwind这样的处理器为类名生成CSS，则应该完整地使用类名。