超简单的选项卡实现

啵啵奶糖的tab选项卡

HTML:

**<div>
			<ul class='tabs'>
				<li class='li-tab' v-for="(item,index) in lists" 
				@click="chageTab(index)"
				:class='{active:index==nowIndex}'>
				{{item}}
				</li>
			</ul>
			<div class='divtab' v-show='nowIndex===0'>
				我是tab1内容
			</div>
			<div class='divtab' v-show='nowIndex===0'>
				我是tab2内容
			</div>
			<div class='divtab' v-show='nowIndex===0'>
				我是tab3内容
			</div>
		</div>**

Script:

export default {
	    name: "fuwu",
	    data(){
		    return{
			    lists:['tab1','tab2','tab3'],
			    nowIndex:0, 	//默认第一个tab为激活状态
		    }
	    },
	    methods:{
	    chageTab:function(index){
				this.nowIndex=index
			},
	    }
}

CSS

<style>
	.active{
        border-bottom: 2rpx solid #2ca7fb;
		width: 20rpx;
        color: #2ca7fb;
      }
      .tabs{
        position: fixed;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 12vw;
        margin: 0;
        padding:0;
      }
      .li-tab{
        flex: 1;
        display: flex;
        font-weight: 610;
        justify-content: center;
        align-items: center;
        height: 100%;
      }
      .divTab{
        width: 100%;
        background: #efecec;
        padding-top: 12vw;
		height: 100vw;
        }
      }
</style>

来自一个菜鸟新手，希望对同样跟我是新手的大家有点帮助，大佬们不要见怪哈，感谢！