vue实现tab切换案例

结构：

<div class="statisticsNav">
  <div :class="{'selected':tab === 1,'statisticsTitle':true}" @click="toTab(1)">空间统计div>
  <div :class="{'selected':tab === 2,'statisticsTitle':true}"  @click="toTab(2)">校本资源统计div>
div>
<div>
  <keep-alive>
      <space v-if="tab === 1" >
      space>
      <resources v-else>
      resources>
  keep-alive>
div>

---

样式：

---

js:

<script>
import Resources from './Resources.vue';
import Space from './Space.vue';
export default {
    data() {
        return {
            tab: 1,
        };
    },
    components: {
        Resources,
        Space,
    },
    methods: {
        toTab(index) {
            this.tab = index;
        },
    },
}
</script>

---

ps：内容文件

import Resources from ‘./Resources.vue’;
import Space from ‘./Space.vue’;