可以通过使用Svelte的条件渲染和类绑定来实现。以下是一个示例:
<script>
let isActive = false;
function toggleActive() {
isActive = !isActive;
}
</script>
<style>
.active {
background-color: blue;
color: white;
}
</style>
<button class:active={isActive} on:click={toggleActive}>
Toggle Button
</button>
在上面的示例中,我们使用了一个布尔变量isActive
来控制按钮的状态。当按钮被点击时,toggleActive
函数会将isActive
的值取反,从而切换按钮的类。通过使用class:active={isActive}
,我们将.active
类与isActive
变量绑定,当isActive
为true
时,按钮会应用.active
类。
这种方法可以用于在Svelte中切换按钮的类。根据具体需求,你可以自定义不同的类名和样式来实现不同的效果。
关于Svelte的更多信息和学习资源,你可以参考腾讯云的Svelte产品介绍页面。
领取专属 10元无门槛券
手把手带您无忧上云