简单的tab切换

效果图

image.png

代码

<template>
    <view class="orderbox">
        <view class="box-warp">
            <view class="type-item-spec">
                <view class="">抬头类型</view>
                <view class="" v-for="(item,index) in items"  :key="index"  :class="{btna:count == index}"@click="change(index)">
                <view class="type-name">{{item}}</view>
                </view>
            </view>
        </view>

        <!-- 个人-->
        <view class="box-warp  end-cont " :class="{dis:btnnum == 0}">
            个人内容
        </view>
        <!-- 单位 -->
        <view class="box-warp box-warp-com end-cont " :class="{dis:btnnum == 1}">
             单位内容
        </view>
        <view class="btn_Submit">保存</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

                items: ["个人", "单位"],
                btnnum: 0,
                count: "",
            }
        },
        methods: {
            change(e) {
                    this.count = e
                    this.btnnum = e
            },
    
        }
    }
</script>
<style scoped lang="scss">
    .orderbox {
        width: 100vw;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .box-warp {
        width: 95%;
        background: #fff;
        display: flex;
        align-items: center;
        flex-direction: column;
        color: #000;
    }
    .orderbox>view:nth-child(1) {
        margin-top: 20upx;
    }
    .type-item-spec {
        width: 96%;
        padding: 15upx;
        display: flex;
        align-items: center;
        border-bottom: 2upx solid #F0F0F0;
        // border: 1px solid red;
        .type-name {
            display: inline-block;
            border: 2upx solid #F0F0F0;
            padding: 10upx 60upx;
            margin-left: 60upx;
        }
    }
    .btn_Submit {
        width: 92%;
        display: inline-block;
        padding: 20upx 0;
        text-align: center;
        background: #E80217;
        color: #fff;
        margin-top: 60upx;
        border-radius:10upx ;
    }
    .end-cont {
            display: none;
        }
            .dis {
                display: block;
            }
.btna {
        color: #E80215;
        font-weight: normal;
        .type-name{
            border: 2upx solid #E80215;
        }
    }
</style>