在 Svelte 中切换按钮 class

Question

考虑这个 Svelte 代码

{#each filters as filters, i}
   <div class='filter-container'>
      <div class='button filter' on:click={ () => setFilter(filters.name, filterContext)}>{filters.name}</div>          
   </div>
{/each}

上面的过滤器按钮是根据某个js对象中有多少个过滤器来制作的。我如何创建一个 class，当单击一个按钮时，它会为所有过滤器按钮切换。

例如。当一个处于活动状态时，其他所有都不处于活动状态？

Answer 1

Class 只是字符串 - 在 svelte 中，您可以像任何其他属性一样将它们绑定到表达式。

例如：

<div class={'button filter ' + (activefilter === filters.name ? 'isactive' : '')}/>

当activefilter === filters.name为真时，按钮class将变为'button filter isactive'

还提供了一个特殊的短语法来切换 classes。查找更多 here

Answer 2

我们可以轻松地将 class 名称绑定到表达式，以便在表达式变为真值时添加 class：

<script>
    let isActive = false
</script>

<style>
    .active {
        color: red;
    }
</style>

<h1 class:active={isActive}>Hello!</h1>
<button on:click={() => isActive = !isActive}>Click me</button>

在这里，单击按钮会切换 isActive 布尔值。 class active 绑定到 h1 元素上的那个变量，您可以看到现在每次单击按钮时颜色都会改变。

这是如何动态设置单个 classes 的标准方法。

回复：https://svelte.dev/repl/988df145876a42c49bb8de51d2cae0f2?version=3.23.0

在 Svelte 中切换按钮 class

Toggle class on buttons in Svelte

javascript

svelte