复制代码结构----供自己直接使用:
<ul class="tabsbox">
<li>
<a @click="cur=0" :class="{active:cur==0}">全部</a>
**//注意a标签中的href必须去掉,否则路由出现问题**
</li>
<li>
<a @click="cur=1" :class="{active:cur==1}">审核中</a>
</li>
<li>
<a @click="cur=2" :class="{active:cur==2}">审核通过</a>
</li>
<li>
<a @click="cur=3" :class="{active:cur==3}">退回</a>
</li>
</ul>
<div class="tab-contents">
<div v-show="cur==0">
</div>
<div v-show="cur==1">
//可直接编写内容
</div>
<div v-show="cur==2">
</div>
<div v-show="cur==3">
</div>
</div>
在export default{
data(){
return{
// 设置cur 默认值
cur:0
}
}
}
设置样式—可直接使用
/* tab栏切换 */
.tabsbox {
overflow: hidden;
border: 1px solid #fff;
}
.tabsbox li {
float: left;
font-size: 0.75rem;
width: 25%;
height: 1rem;
padding: 0.45rem 0;
background: #fff;
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.tabsbox li a {
padding: 0.35rem 0.5rem;
line-height: 1rem;
border-bottom: 1.5px solid transparent;
}
.tabsbox li a.active {
color: #7ed321;
border-bottom: 3px solid #7ed321;
}