vuetab切换功能实现

vuetab切换功能实现的方法如下：

1. 首先，在Vue组件中定义一个data属性，用于存储当前选中的tab索引。

2. 在模板中使用v-for指令循环渲染tab栏，并绑定click事件，点击tab时触发对应的方法。

3. 在方法中，更新data属性中的tab索引，并根据索引加载对应的内容数据。

4. 可以使用Vue的watch属性来监听tab索引的变化，当索引发生变化时，触发相应的ajax请求，获取最新的数据。

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

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

<script>
export default {
  data() {
    return {
      tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
      activeTab: 0,
      content: '',
      dataLoading: false
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    changeTab(index) {
      this.activeTab = index;
      this.loadData();
    },
    loadData() {
      this.dataLoading = true;
      // 发送ajax请求获取数据
      // 根据this.activeTab的值来确定请求的接口和参数
      // 将获取到的数据赋值给this.content
      // 请求完成后将this.dataLoading设为false
    }
  },
  watch: {
    activeTab() {
      this.loadData();
    }
  }
};
</script>