在斯维尔特的按钮上切换类

Question

考虑这个斯维尔特代码{#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对象中的过滤器数量而制作的。如何创建一个在单击一个按钮时为所有筛选器按钮切换的类。例如。当一个人活跃时，其他人都不活跃？

Answer 1

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

例如：

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

当为 true 时，则按钮类将变为activefilter === filters.name'button filter isactive'

还提供了用于切换类的特殊简短语法。在此处查找更多内容

Answer 2

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

<script>

    let isActive = false

</script>

<style>

    .active {

        color: red;

    }

</style>

<h1 class:active={isActive}>Hello!</h1>

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

在这里，单击该按钮可切换布尔值。该类绑定到元素上的该变量，您可以看到颜色现在每次单击按钮时都会发生变化。isActiveactiveh1

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

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