Svelte：来自变量的动态顺风-Class

Question

如果另一个变量为真，我如何应用顺风 class...以下似乎不起作用。

这个有效

<script>
    let svgColor = 'text-red-400'
    
</script>
    
<p class="{svgColor}">Test</p>

但这并不

<script>
    let svgColor = 'text-red-400'
    let svgVisible = true;
</script>

<p class="{svgVisible ? {svgColor} : ''}">Test</p>

Answer 1

通过用大括号包裹 svgColor，您可以有效地使用 svgColor 道具创建一个对象。

正确的语法是：

<p class={svgVisible ? svgColor : ''}>Test</p>