Svelte动态样式处理

Question

https://svelte.dev/repl/83031a6a492c4a30a861e4310209e9b6?version=3.24.0

是否有其他方法来代替直接将样式写入原始样式标记中？：

<div style="width: {width}; height: {height};">ᕕ( ᐛ )ᕗ</div>

或者；在这种情况下的最佳实践是什么，在这种情况下，交付的样式可以是任何东西/是动态的，并且不是预类的？

Answer 1

这里有一个例子：

<script>
  let bgcol="blue"
  let style=`color:red;background-color:${bgcol}`
</script>  
    ​
<h1 {style}> Hello <h1>

编辑：{style}是style={style}的缩写

您可以在REPL中找到工作示例：

https://svelte.dev/repl/f039834923014cd7aca30c54d957c844?version=3.24.0