css气泡选项卡

<div class="table">
            <div class="one" :class="{two:index == num}"  v-for="(item,index) in tabData" :key="index" @click="menubtn(index)">{{item.name}}</div>
            
        </div>
 methods: {
            menubtn(index){
                this.num = index
            },
}
<style>

    .table{
        background-color: #fff;
        width: 100%;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
    }
    .one {
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #fff;
            color: #000;
            position: relative;
            padding: 0 10px;
            /*子绝父相*/
        }
    
        .one:before {
            /*伪元素必须添加content*/
            content: "";
            width: 0;
            height: 0;
            /*IE6下，height:0;不顶用，可使用font-size:0; + overflow:hidden;修复此问题*/
            font-size: 0;
            overflow: hidden;
            display: block;
            border-width: 10px;
            /*为了兼容IE6，所有设置为透明（transparent）的边，需要设置为dashed；有颜色的边设置为solid*/
            position: absolute;
            /*绝对定位不占位置*/
            top: 50px;
            /* 向下移动 矩形的高度 + 矩形的上下内边距 + 下边框粗细*/
            left: 45%;
            /*相对于矩形宽度的位置*/
        }
    .two {
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #1765EB;
            color: #fff;
            position: relative;
            padding: 0 10px;
            /*子绝父相*/
        }
    
        .two:before {
            /*伪元素必须添加content*/
            content: "";
            width: 0;
            height: 0;
            /*IE6下，height:0;不顶用，可使用font-size:0; + overflow:hidden;修复此问题*/
            font-size: 0;
            overflow: hidden;
            display: block;
            border-width: 10px;
            border-color: #1765EB transparent transparent transparent;
            /*为了兼容IE6，所有设置为透明（transparent）的边，需要设置为dashed；有颜色的边设置为solid*/
            border-style: solid dashed dashed dashed;
            position: absolute;
            /*绝对定位不占位置*/
            top: 50px;
            /* 向下移动 矩形的高度 + 矩形的上下内边距 + 下边框粗细*/
            left: 45%;
            /*相对于矩形宽度的位置*/
        }
</style>