基于vue的tab切换

html部分

<!-- tab切换  根据tabIndex等式是否成立来决定第二个类名active是否存在-->
			<div class="TabCut">
				<ul>
					<li @click="cut(1)" :class="['shen',{'active':tabIndex === 1}]">
						程序员
					</li>
					<li @click="cut(2)" :class="['shen',{'active':tabIndex === 2}]">
						bug
					</li>
				</ul>
				<!-- 程序员 -->
				<div v-if="tabIndex === 1" class="examine">
					程序员11
				</div>
				<!-- bug -->
				<div v-else class="examine">
					bug22
				</div>
			</div>

css部分

.TabCut{
	height: 96%;
}
.TabCut>ul{
	margin: 0;
	padding: 0;
	display: flex;
	margin: 9px 22px 7px 0;
	background-color: rgba(243, 246, 249, 100);
	border: 1px solid rgba(224, 227, 234, 100);
}
.TabCut>ul>li {
	width: 100px;
	height: 35px;
	list-style: none;
	line-height: 35px;
	text-align: center;
}

.TabCut>ul>li:nth-child(1) {
	color: #1990FF;
}

//当只有一个shen时为未选中状态
.TabCut .shen{
	border-bottom: none; 
	color: #101010;
}
当shen和active同时存在时为选中状态(shen和active没有空格)
.TabCut .shen.active{
	background-color: #fff; 
	color: #1990FF;
}


	/* height: 90%; */
.examine{
	height: 100%;
	margin-right: 22px;
	overflow: hidden;
}

js部分

data中声明一个全局变量
data(){
   return{
	temp: true,
    tabIndex:1,
   }
}
方法里将
cut(tab) {
	this.tabIndex = tab;
},