svelte classを動的につける

結論

<div class:クラス名={条件}></div>

例

クリックされた文字にselectedクラスをつけて文字を赤くする。

<script>
	let current = 'apple';
</script>

<div>
	<ul>
		<li class:selected={current === 'apple'} on:click={() => (current = 'apple')}>
			りんご
		</li>
		<li class:selected={current === 'banana'} on:click={() => (current = 'banana')}>
			バナナ
		</li>
		<li class:selected={current === 'grape'} on:click={() => (current = 'grape')}>
			ぶどう
		</li>
	</ul>
</div>

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

その他

上記の例では、あるクラスをつけるかつけないかしか制御できない。
条件により違うクラスをつける場合は、

<div>
	<ul>
		<li class:selected={current === 'apple'} on:click={() => (current = 'apple')}>
			りんご
		</li>
		<li class:selected={current === 'banana'} on:click={() => (current = 'banana')}>
			バナナ
		</li>
		<li class:selected={current === 'grape'} on:click={() => (current = 'grape')}>
			ぶどう
		</li>
	</ul>
</div>