vue中如何实现导航栏点击时，给当前点击的添加样式，其他的去除样式

在 Vue 中实现导航栏点击时，给当前点击的添加样式，其他的去除样式，可以使用以下几个步骤：

1. 在导航栏的组件中，定义一个变量来存储当前点击的索引值，比如 `currentIndex`，初始值设为 0。

2. 在导航栏的 HTML 模板中，使用 `v-for` 循环渲染导航栏的每个项，并使用 `v-bind:class` 绑定样式类。绑定样式类时，判断当前项的索引值是否等于 `currentIndex`，如果相等，则添加一个选中样式类，否则不添加。

3. 在每个导航项的点击事件中，将 `currentIndex` 更新为当前项的索引值。可以使用 `v-on:click` 或 `@click` 绑定点击事件。

下面是一个示例代码：

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

<script>
export default {
  data() {
    return {
      navList: ['首页', '新闻', '产品', '关于我们'],
      currentIndex: 0
    }
  }
}
</script>

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

在上面的代码中，当点击导航栏的某一项时，会将 `currentIndex` 更新为当前项的索引值，然后根据 `v-bind:class` 的绑定，会自动添加或删除 `active` 样式类。