vue组件实现 tab 标签页切换效果

Vue组件可以通过v-bind和v-show指令实现tab标签页切换效果。

首先需要在data中定义一个用于切换的变量，比如tabIndex，默认为0。在模板中，可以使用v-for指令遍历标签页的标题，并使用v-bind:class来绑定样式名。在每个标签页标题上添加@click事件，通过调用一个方法来更新tabIndex的值。

接下来，在模板中使用v-show指令来根据tabIndex的值来决定当前显示的标签页。可以通过判断当前索引是否与tabIndex相等，如果相等则显示，否则隐藏。

下面是一个简单的示例代码：

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

<script>
export default {
  data() {
    return {
      tabIndex: 0,
      tabs: [
        { title: '标签1', content: '标签1的内容' },
        { title: '标签2', content: '标签2的内容' },
        { title: '标签3', content: '标签3的内容' }
      ]
    }
  },
  methods: {
    changeTab(index) {
      this.tabIndex = index;
    }
  }
}
</script>

<style scoped>
.active {
  color: red;
  font-weight: bold;
}
</style>

在上述代码中，tabs数组存储了所有标签页的内容和标题。changeTab方法根据点击的标题更新tabIndex的值，从而实现切换效果。在模板中使用v-for和v-show指令根据tabIndex的值来决定当前显示的标签页和标题的样式。

最后，可以通过CSS来美化标签页的样式，比如添加活动样式等。