阅读(1151) (0)

Svelte 快捷类指令

2023-02-22 15:04:19 更新

通常,类的名称将与其所依赖的值的名称相同:

<div class:big={big}>
	<!-- ... -->
</div>

在这些情况下,我们可以使用简写形式:

<div class:big>
	<!-- ... -->
</div>

示例代码

  • App.svelte

<script>
	let big = false;
</script>

<style>
	.big {
		font-size: 4em;
	}
</style>

<label>
	<input type=checkbox bind:checked={big}>
	big
</label>

<div class:big>
	some {big ? 'big' : 'small'} text
</div>