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>