Vueモバイル端末手書きタブバースイッチ

直接使用するためにコード構造をコピーします。

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

セットスタイル-直接使用できます

/ *タブ栏切换* /
.tabsbox { オーバーフロー：非表示; ボーダー：1px実線#fff; } .tabsbox li { float：左; フォントサイズ：0.75rem; 幅：25％; 高さ：1レム; パディング：0.45rem 0; 背景：#fff; text-align：center; border-bottom：1px solid＃e5e5e5; } .tabsbox li a { パディング：0.35rem 0.5rem; 行の高さ：1rem; border-bottom：1.5pxソリッド透明; } .tabsbox li a.active { color：＃7ed321; border-bottom：3px solid＃7ed321; }