svelte 5 按照条件设置样式

设置style

<script lang="ts">let count: number = $state(0);const decrement = () => {count -= 1;};const increment = () => {count += 1;};
</script><button onclick={decrement}> - </button>
<span style:color={count >= 0 ? "green" : "red"}>{count}</span>
<button onclick={increment}> + </button>

设置class

<script lang="ts">let count: number = $state(0);const decrement = () => {count -= 1;};const increment = () => {count += 1;};
</script><button onclick={decrement}> - </button>
<span class:green={count >= 0} class:red={count < 0}>{count}</span>
<button onclick={increment}> + </button><style>.green {color: green;}.red {color: red;}
</style>