vue中有签到和签退组成的菜单栏,选择不同的菜单时选中的菜单高亮,其他菜单变成灰色.如何实现

在Vue中实现这个功能可以通过以下步骤：

1. 在Vue组件中定义一个data属性来存储当前选中的菜单项的索引，初始值为0。

2. 在菜单栏中使用v-for指令循环渲染菜单项，并使用v-bind:class指令绑定样式类，根据当前选中的菜单项的索引来判断是否为选中状态。

3. 在菜单项上绑定一个点击事件，当点击菜单项时，更新当前选中的菜单项的索引。

4. 在样式表中定义选中状态和非选中状态的样式类，通过CSS选择器来控制菜单项的样式。

以下是示例代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in menuItems" :key="index" :class="{ 'active': currentIndex === index, 'inactive': currentIndex !== index }" @click="setCurrentIndex(index)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: ['签到', '签退'],
      currentIndex: 0
    }
  },
  methods: {
    setCurrentIndex(index) {
      this.currentIndex = index
    }
  }
}
</script>

<style>
li {
  display: inline-block;
  padding: 10px;