vue2脚手架实现tab选项卡

可以通过以下步骤使用vue2脚手架实现tab选项卡：

1. 在父组件中定义一个数组tabs，包含选项卡的标题和内容：

data() {
  return {
    tabs: [
      { title: '选项卡1', content: '内容1' },
      { title: '选项卡2', content: '内容2' },
      { title: '选项卡3', content: '内容3' }
    ],
    activeTab: 0
  }
}

2. 在模板中使用v-for指令渲染选项卡的标题，并绑定click事件，将索引赋值给activeTab：

<template>
  <div>
    <div class="tabs">
      <div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="activeTab = index">{{ tab.title }}</div>
    </div>
    <div class="tab-content">{{ tabs[activeTab].content }}</div>
  </div>
</template>

3. 根据activeTab的值显示对应选项卡的内容。可以使用计算属性实现：

computed: {
  activeContent() {
    return this.tabs[this.activeTab].content
  }
}

4. 根据需要自定义样式即可实现tab选项卡效果。

完整代码示例：

<template>
  <div>
    <div class="tabs">
      <div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="activeTab = index">{{ tab.title }}</div>
    </div>
    <div class="tab-content">{{ activeContent }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: '选项卡1', content: '内容1' },
        { title: '选项卡2', content: '内容2' },
        { title: '选项卡3', content: '内容3' }
      ],
      activeTab: 0
    }
  },
  computed: {
    activeContent() {
      return this.tabs[this.activeTab].content
    }
  }
}
</script>

<style>
.tabs {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}
.tabs div {
  padding: 10px;
  cursor: pointer;
}
.tabs div.active {
  border-bottom: 2px solid #333;
}
.tab-content {
  padding: 10px;
}
</style>