vue导航栏点击当前文字变色

在Vue.js中，你可以通过JavaScript或者CSS来实现导航栏点击时当前文字变色的效果。这里提供一种常见的做法：

1. **使用CSS**：
首先，在CSS中设置一个伪类`:hover`，当鼠标悬停在导航链接上时应用样式。例如，如果你有一个包含链接的导航栏组件，可以这样做：

   <template>
     <ul class="navbar">
       <li v-for="(item, index) in items" :key="index">
         <a :href="item.href" @click.prevent="handleClick(index)" v-bind:class="{ active: isActive(index) }">{{ item.text }}</a>
       </li>
     </ul>
   </template>

   <style scoped>
     .navbar li a {
       transition: color 0.3s;
     }
     
     .navbar li a:hover,
     .navbar li.active a {
       color: red; /* 变成红色 */
     }
   </style>

`isActive()`函数可以根据当前选中的索引判断是否将`.active`类添加到对应的链接。

2. **使用JavaScript (vue-router)**：
如果你在项目中使用了vue-router，可以在路由守卫或全局事件监听器里更新一个数据状态，然后根据这个状态改变文本颜色。例如：

   data() {
     return {
       currentLinkIndex: -1 // 初始化为未选中
     }
   },
   
   methods: {
     handleClick(index) {
       this.currentLinkIndex = index;
     },
     isActive(index) {
       return this.currentLinkIndex === index;
     }
   }

然后在HTML模板中使用`v-bind:class`绑定这个`isActive`计算属性的返回值。