uniapp导航栏切换

<template>
    <view class="warehousingToBeCon">
        <!-- nav -->
        <view class="nav">
            <view class="flex_between">
                <view class="nav_title">
                    <view :class="{'active':isActive==1}" @click="chenked(1)">
                        已修改
                    </view>
                </view>
                <view class="nav_title">
                    <view :class="{'active':isActive==2}" @click="chenked(2)">
                        待修改
                    </view>
                </view>
            </view>
        </view>
        <!--切换内容-->
        <view class="nav_item" v-if="isActive==1">
            已修改
        </view>
        <view class="nav_item" v-if="isActive==2">
            待修改
        </view>
    </view>

</template>

<script>
    export default {
        data() {
            return {
                isActive: 1
            }
        },
        methods: {
            chenked(type) {
                this.isActive = type
            },
        }
    }
</script>

<style lang="scss" scoped>
    .warehousingToBeCon {
        width: 100%;
        background-color: #f2f2f2;

        .nav {
            border-top: 1rpx solid #f2f2f2;
            background-color: #fff;

            .flex_between {
                display: flex;

                .nav_title {
                    height: 88rpx;
                    line-height: 88rpx;
                    width: 100%;
                    text-align: center;
                    font-size: 32rpx;
                    font-family: "PingFang";
                    color: rgb(102, 102, 102);
                }
            }
        }
    }

    .active {
        position: relative;
        color: #31d378;
    }

    .active::after {
        content: "";
        position: absolute;
        width: 100rpx;
        height: 4rpx;
        background-color: #31d378;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;

    }
</style>