Svelte 类指令

2023-02-22 15:03 更新

与任何其他属性一样,您可以使用 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>


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号