vue实现active

在Vue中实现active状态

通过v-bind:class或class绑定动态类名，结合CSS实现active效果。以下为常见场景的实现方法：

导航菜单active样式

使用v-bind:class根据当前路由或点击状态添加active类：

<template>
  <ul>
    <li 
      v-for="item in menuItems" 
      :key="item.path"
      :class="{ active: $route.path === item.path }"
    >
      <router-link :to="item.path">{{ item.title }}</router-link>
    </li>
  </ul>
</template>

.active {
  background-color: #42b983;
  color: white;
}

点击切换active状态

使用数据属性跟踪当前active项：

<template>
  <div>
    <button 
      v-for="(tab, index) in tabs"
      :key="index"
      @click="currentTab = index"
      :class="{ active: currentTab === index }"
    >
      {{ tab }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Home', 'About', 'Contact'],
      currentTab: 0
    }
  }
}
</script>

列表项active交互

结合鼠标事件实现hover和click双重效果：

<template>
  <ul>
    <li 
      v-for="item in items"
      :key="item.id"
      @mouseover="hoverItem = item.id"
      @mouseout="hoverItem = null"
      @click="activeItem = item.id"
      :class="{
        hover: hoverItem === item.id,
        active: activeItem === item.id
      }"
    >
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' }
      ],
      hoverItem: null,
      activeItem: null
    }
  }
}
</script>

动态组件active状态

与Vue的<component>结合使用：

<template>
  <div>
    <button
      v-for="comp in components"
      :key="comp.name"
      @click="currentComponent = comp"
      :class="{ active: currentComponent === comp }"
    >
      {{ comp.name }}
    </button>
    <component :is="currentComponent.component" />
  </div>
</template>

使用计算属性优化

对于复杂逻辑，推荐使用计算属性：

<template>
  <div :class="computedClasses">内容区域</div>
</template>

<script>
export default {
  computed: {
    computedClasses() {
      return {
        active: this.isActive && !this.disabled,
        'text-danger': this.hasError
      }
    }
  }
}
</script>

以上方法可根据具体需求组合使用，通过数据驱动的方式管理active状态，保持视图与状态的同步。CSS部分建议使用过渡动画增强交互体验，例如：

.active {
  transition: all 0.3s ease;
  transform: scale(1.05);
}