vue导航栏动态添加样式

可以利用Vue的动态绑定class的方式来实现导航栏动态添加样式。

1. 在导航栏中，使用v-for指令循环渲染导航栏选项，并使用v-bind:class指令将样式绑定到导航栏选项上。

<template>
  <div class="nav">
    <div v-for="(item, index) in navItems" :key="index" :class="{active: activeIndex === index}" @click="handleClick(index)">
      {{item}}
    </div>
  </div>
</template>

2. 在组件的data选项中定义activeIndex变量，用于记录当前选中的导航栏选项的下标。

<script>
export default {
  data() {
    return {
      navItems: ['Home', 'About', 'Contact'],
      activeIndex: 0
    }
  },
  methods: {
    handleClick(index) {
      this.activeIndex = index;
    }
  }
}
</script>

3. 在组件的style选项中，定义.active样式，用于设置选中导航栏选项的样式。

<style>
.nav {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.nav div {
  cursor: pointer;
}

.active {
  border-bottom: 2px solid #333;
}
</style>

这样，当用户点击导航栏选项时，Vue会根据activeIndex的值动态添加或移除.active样式，实现导航栏动态添加样式的效果。