Svelte中如何使用动态样式和类

在Svelte中使用动态样式和类非常简单。你可以使用Svelte的反应性声明来动态更改元素的样式和类。

首先，你可以在Svelte组件中声明一个变量来存储动态样式或类的值，然后在元素上使用绑定该变量来应用样式或类。

例如，假设你有一个按钮组件，根据用户的点击来改变按钮的样式。你可以这样实现：

<script>
  let isClicked = false;

  function handleClick() {
    isClicked = !isClicked;
  }
</script>

<button on:click={handleClick} class:clicked={isClicked}>
  Click me
</button>

<style>
  .clicked {
    background-color: red;
    color: white;
  }
</style>

在上面的例子中，当按钮被点击时，isClicked变量会在handleClick函数中切换状态。如果isClicked为true，则会应用.clicked类的样式，使按钮的背景颜色变为红色。

通过使用Svelte的反应性声明和绑定语法，你可以方便地实现动态样式和类的效果。