vue3中怎么实现菜单点击后变色

在Vue3中，你可以通过组件的状态管理（比如Vuex）或直接在模板上使用v-bind:class绑定CSS类来实现菜单点击后变色。这里提供一种简单的示例：

**1. 使用HTML模板和事件绑定：**

<template>
  <li :class="{ active: isActive === 'menu-item-1' }" @click="toggleActive('menu-item-1')">菜单项1</li>
  <!-- 添加更多的菜单项 -->
  <li :class="{ active: isActive === 'menu-2')">菜单项2</li>
</template>

<script>
export default {
  data() {
    return {
      isActive: ''
    };
  },
  methods: {
    toggleActive(item) {
      this.isActive = item;
    }
  }
};
</script>

在这个例子中，当用户点击某个菜单项时，`isActive`数据会切换到对应的值，从而改变`active`类的加减，使得该菜单项的样式发生变化。

**2. 使用计算属性：**
如果你有多个菜单需要共享状态，可以使用计算属性：

<template>
  <li :class="activeClass">菜单项</li>
</template>

<script>
export default {
  computed: {
    activeClass() {
      return this.isActive ? 'active' : '';
    },
    // 如果你有多个菜单项，将'menu-item-1'、'menu-item-2'等替换为实际标识符
    isActive: { get() { return this.menuItem === 'menu-item-1'; }, set(newVal) { this.menuItem = newVal; } }
  },
  props: {
    menuItem: String
  }
};

然后在组件接收`menuItem`作为props，当传入新的值时，`activeClass`就会相应更新。

**