Svelte类指令

Svelte 类指令

与任何其他属性一样，您可以使用 JavaScript 属性指定类，如下所示：<button

class="{current === 'foo' ? 'selected' : ''}"

on:click="{() => current = 'foo'}"

>foo</button>这是 UI 开发中的一种常见模式，以至于 Svelte 包含一个特殊指令来简化它：<button

class:selected="{current === 'foo'}"

on:click="{() => current = 'foo'}"

>foo</button>只要表达式的值为真，selected 类就会添加到元素中，如果为假，则将其删除。App.svelte<script>

let current = 'foo';

</script>

<style>

button {

display: block;

}

.selected {
    background-color: #ff3e00;
    color: white;
}

</style>

<button

class:selected="{current === 'foo'}"

on:click="{() => current = 'foo'}"

>foo</button>

<button

class:selected="{current === 'bar'}"

on:click="{() => current = 'bar'}"

>bar</button>

<button

class:selected="{current === 'baz'}"

on:click="{() => current = 'baz'}"

>baz</button>