当前位置：首页 > VUE

vue实现点击导航高亮

2026-01-20 00:24:44VUE

实现点击导航高亮的方法

在Vue中实现点击导航高亮可以通过动态绑定class或style来实现。以下是几种常见的方法：

使用动态class绑定

通过v-bind:class或简写:class动态绑定类名，根据当前选中状态添加高亮样式。

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

<script>
export default {
  data() {
    return {
      navItems: ['首页', '产品', '关于我们', '联系'],
      activeIndex: 0
    }
  }
}
</script>

<style>
.active {
  color: #42b983;
  font-weight: bold;
}
</style>

使用动态style绑定

通过v-bind:style或简写:style动态绑定内联样式。

<template>
  <div>
    <ul>
      <li 
        v-for="(item, index) in navItems" 
        :key="index"
        @click="activeIndex = index"
        :style="{ color: activeIndex === index ? '#42b983' : '', fontWeight: activeIndex === index ? 'bold' : '' }"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

使用路由高亮

如果导航与路由相关，可以使用vue-router的router-link和active-class属性。

<template>
  <div>
    <ul>
      <router-link 
        v-for="(item, index) in navItems" 
        :key="index"
        :to="item.path"
        active-class="active"
      >
        {{ item.name }}
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { name: '首页', path: '/' },
        { name: '产品', path: '/products' },
        { name: '关于我们', path: '/about' }
      ]
    }
  }
}
</script>

<style>
.active {
  color: #42b983;
  font-weight: bold;
}
</style>

使用计算属性

对于更复杂的高亮逻辑，可以使用计算属性来动态生成类名或样式。

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

<script>
export default {
  data() {
    return {
      navItems: ['首页', '产品', '关于我们', '联系'],
      activeIndex: 0
    }
  },
  methods: {
    getActiveClass(index) {
      return {
        'active': this.activeIndex === index,
        'disabled': index === 2 // 示例：额外条件
      }
    }
  }
}
</script>

<style>
.active {
  color: #42b983;
  font-weight: bold;
}
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>