Vue mobile terminal handwriting tab bar switch

Copy the code structure ---- for your direct use:

<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
		}
  	}
  }

Set style-can be used directly

/* 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;
}