Vue中如何修改导航栏激活元素的类名

你需要同时使用v-bind和v-on两个指令：

• v-on（简写@）：用来绑定点击事件，触发切换激活菜单项的逻辑
• v-bind（简写:）：用来动态绑定class属性，根据当前激活状态决定是否添加active类

以下是修正后的完整组件代码：

修正后的script部分 #

<script>
export default {
  data() {
    return {
      items: [
        {
          name: 'Features',
          url: '/features'
        },
        {
          name: 'Prices',
          url: '/prices'
        },
        {
          name: 'Community',
          url: '/community'
        },
        {
          name: 'Support',
          url: '/support'
        }
      ],
      activeId: 0 // 默认激活第一个菜单项，可根据需求修改初始值
    }
  },
  methods: {
    selectMenuItem(id) {
      this.activeId = id;
    }
  }
}
</script>

修正后的template部分 #

<template>
  <ul class="nav"> <!-- 可根据实际布局调整外层容器 -->
    <li class="nav-item" v-for="(item, index) in items" :key="index">
      <a 
        class="nav-link" 
        :aria-current="index === activeId ? 'page' : null"
        :href="item.url" 
        @click="selectMenuItem(index)"
        :class="{ active: index === activeId }"
      >
        {{ item.name }}
      </a>
    </li>
  </ul>
</template>

关键修正点说明 #

• 在data中新增activeId，用于存储当前激活菜单项的索引
• 用:href替代{{ item.url }}绑定动态链接，符合Vue语法规范
• 点击事件绑定为@click="selectMenuItem(index)"，将当前项索引传入方法
• 动态class通过index === activeId判断，匹配时自动添加active类
• 动态处理aria-current属性，仅在激活项上设置为page，提升页面可访问性

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