vue头部导航栏点击变色

可以使用Vue中的`class`绑定来实现头部导航栏点击变色的效果，具体实现步骤如下：

1. 在Vue中定义一个变量，用来保存当前选中的导航栏项的索引值，比如`currentIndex`。

2. 在导航栏项的HTML代码中，使用`:class`绑定动态类名，绑定的类名为一个对象，对象中包含两个属性：一个是要绑定的类名，另一个是该类名是否应该被绑定，根据`currentIndex`和当前项的索引值是否相等来判断是否绑定该类名。

3. 在导航栏项的点击事件中，将`currentIndex`更新为当前项的索引值。

下面是一个示例代码：

<template>
  <div>
    <ul>
      <li :class="{active: currentIndex === 0}" @click="currentIndex = 0">导航栏项1</li>
      <li :class="{active: currentIndex === 1}" @click="currentIndex = 1">导航栏项2</li>
      <li :class="{active: currentIndex === 2}" @click="currentIndex = 2">导航栏项3</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0
    };
  }
};
</script>

<style>
.active {
  color: red;
}
</style>

在上面的示例代码中，使用`:class`绑定动态类名，绑定的类名为`active`，表示选中该导航栏项时应该添加该类名，CSS样式中定义了该类名的颜色为红色。点击导航栏项时，更新`currentIndex`的值，根据该值来判断是否应该添加`active`类名。