Vue3中点击切换div的is-active类名有什么更简洁的实现方案？

有两种更简洁的实现方案可选：

方案1：三元表达式直接切换类名 #

仅修改open函数的逻辑，一行代码即可替代多分支if判断，符合你要求的字符串类名切换需求：

setup() {
    let is_active = ref('no-active');

    function open() {
      is_active.value = is_active.value === 'is-active' ? 'no-active' : 'is-active';
    }

    return {
      is_active,
      open
    }
  }

方案2：布尔状态+Vue原生类绑定（更推荐的最佳实践） #

虽然你已知布尔值实现方案，但该方案语义更清晰、维护成本更低，适配Vue的响应式设计思路：
模板部分修改为：

<div :class="{ 'is-active': isActive, 'no-active': !isActive }" @click="open">

逻辑部分修改为：

setup() {
    let isActive = ref(false);

    function open() {
      isActive.value = !isActive.value;
    }

    return {
      isActive,
      open
    }
  }

内容的提问来源于stack exchange，提问作者Rade Ilijev