选项卡功能 样式

先上效果图

 

 

用的flex布局，flex=1 自动平均分为几块

选中样式就是tab-active，有个背景色和下划线

<template>
    <div>
        <div class="tab-box">
            <!-- <div class="tab-li" :class="[activeIndex==0?'tab-active':'']" @click="changeTab(0)">选项卡1</div>
            <div class="tab-li" :class="[activeIndex==1?'tab-active':'']" @click="changeTab(1)">选项卡2</div>
            <div class="tab-li" :class="[activeIndex==2?'tab-active':'']" @click="changeTab(2)">选项卡3</div> -->
            <div class="tab-li" :class="activeIndex==item.value?'tab-active':''" v-for="(item,index) in tabList" :key="index" @click="changeTab(item.value)">{{item.name}}</div>
        </div>
        <div class="" v-show="activeIndex == 0">
            我是选项卡一
        </div>
        <div class="" v-show="activeIndex == 1">
            我是选项卡二
        </div>
        <div class="" v-show="activeIndex == 2">
            我是选项卡三
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                activeIndex:0,
                tabList: [
                    { name: '选项卡1',value: 0 },
                    { name: '选项卡2',value: 1 },
                    { name: '选项卡3',value: 2 },
                    { name: '选项卡4',value: 4 }
                ]
            }
        },
        methods: {
            changeTab(value){
                this.activeIndex = value;
            },
        }
    }
</script>
<style>
    .tab-box{
        background-color: #FFFFFF;
        height: 40px;
        display: flex;
    }
    .tab-li{
        flex: 1;
        text-align: center;
        color: #C9C9C9;
        height: 40px;
        line-height: 40px;
    }
    .tab-active{
        color: #5BA7FF;
        border-bottom: 2px solid #5BA7FF;
    }
    page{
        background-color: #F2F2F2;
    }
</style>