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>