Svelte 類指令

與任何其他屬性一樣，您可以使用 JavaScript 屬性指定類，如下所示：

<button
	class="{current === 'foo' ? 'selected' : ''}"
	on:click="{() => current = 'foo'}"
>foo</button>

這是 UI 開發(fā)中的一種常見模式，以至于 Svelte 包含一個(gè)特殊指令來簡(jiǎn)化它：

<button
	class:selected="{current === 'foo'}"
	on:click="{() => current = 'foo'}"
>foo</button>

只要表達(dá)式的值為真，selected 類就會(huì)添加到元素中，如果為假，則將其刪除。

• 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>