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>

---

样式：

<style lang="scss">
.statistics, .container{
    width: 100%;
    height: 100%;
    .statisticsNav {
        height: 40px;
        line-height: 40px;
        display: flex;
        .statisticsTitle {
            flex: 1;
            text-align: center;
            background-color: #f8f9fc;
            color: #999999;
            cursor: pointer;
        }
        .selected {
            color: black;
            background-color: #fff;
        }
        
    }
}
</style>

---

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’;