在Svelte中单击按钮时，如何更改类？

Question

在Svelte中单击按钮时，如何更改类？

守则如下：

<script lang="ts">
  let rank = 1;

  const changeRank = () => {
    if (rank == 1) {
        rank = 2
    } else {
        rank = 1
    }
  };
</script>

<main>
    <div class="card" class:input-focus={rank === 1? "rank-1" : "rank-2"} />
    <button on:click={changeRank}>Change Rank</button>
</main>

Answer 1

您使用的是一个类指令(class:...)，如果值是真的，这将在:之后添加这个类。这可能不是您想要的，因为这两个值都是真实的，所以它总是添加类input-focus。

你可能想做这样的事：

<div class="card {rank === 1 ? 'rank-1' : 'rank-2'}" />

如果所有类都有这个前缀，那么您也可以这样做：

<div class="card rank-{rank}" />