uni-app教你如何实现一个简单的选项卡

使用基础：
1.v-show显示隐藏
2.click点击事件
3.三目运算

步骤说明：
1.先写一个外框，在抒写2个内容，先把选项卡固定在顶部使用display: flex;，随后写2个不同的样式去区分选中和未选择

<view class="inv-h-w">
        <view class="inv-h-se">开具发票</view>
        <view class="inv-h">开票记录</view>
</view>

.inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
.inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
.inv-h-se{color: #FF9014;border-bottom: 4upx solid #FF9014;}

2.三目运算分别给他们赋一个排序，点击的时候获取是第一个还是第二个，如果选中则添加inv-h-se样式

<view class="inv-h-w">
        <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">开具发票</view>
        <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">开票记录</view>
</view>

3.return中默认显示第一个

return {
        Inv:0,
}

4.最后写2个不同的容器，使用v-show来切换

<view class="" v-show="Inv == 0">
        我是选项卡一
</view>
<view class="" v-show="Inv == 1">
        我是选项卡二
</view>

<template>
        <view>
                <view class="inv-h-w">
                        <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">开具发票</view>
                        <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">开票记录</view>
                </view>
                <view class="" v-show="Inv == 0">
                        我是选项卡一
                </view>
                <view class="" v-show="Inv == 1">
                        我是选项卡二
                </view>
        </view>
</template>
 
<script>
        export default {
                data() {
                        return {
                                Inv:0
                        }
                },
                methods: {
                        changeTab(Inv){
                                that.navIdx = Inv;
                                 
                        },
                }
        }
</script>
         
<style>
        .inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
        .inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
        .inv-h-se{color: #FF9014;border-bottom: 4upx solid #FF9014;}
        page{background-color: #F2F2F2;}
</style>