vue2 实现tab选项卡 鼠标滑过每一个tab 改变样式

在Vue.js 2.x中，实现Tab选项卡并让鼠标滑过每个标签改变样式，通常可以使用v-bind:class或者计算属性结合element-ui库（如果项目采用了它）来完成。这里是一个简化的例子：

首先，在HTML模板上创建Tab组件，每个Tab是一个`<a>`元素，并绑定`v-bind:class`到一个计算属性上，这个属性会根据当前是否被鼠标悬停来动态改变样式：

<template>
  <div class="tabs">
    <ul>
      <li v-for="(item, index) in tabs" :key="index">
        <a href="#" @mouseover="active = index" @mouseout="active = null"
          :class="{ active: active === index }">{{ item.title }}</a>
      </li>
    </ul>
    <div v-if="active">
      <!-- 内容区域 -->
      {{ tabs[active].content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Tab1', content: '这是第一个Tab的内容' },
        { title: 'Tab2', content: '这是第二个Tab的内容' },
        // 更多Tab...
      ],
      active: null,
    };
  },
  computed: {
    // 计算当前激活的Tab
    getActiveStyle() {
      if (this.active !== null) {
        return { 'tab-active': true };
      }
      return {};
    },
  },
};
</script>

<style scoped>
.tabs a {
  display: block;
  padding: 10px;
  transition: background-color 0.3s ease;
}

.tab-active {
  background-color: #f5f5f5; /* 悬停时的颜色 */
}
</style>

在这个示例中，当鼠标移入某个Tab时，对应的`active`变量会被设置为当前索引，`getActiveStyle`计算属性会让那个Tab的样式变为选中状态（背景色变化）。当鼠标离开时，`active`恢复为null，取消选中效果。