vue移动端手写tab栏切换

最新推荐文章于 2024-03-22 11:09:08 发布

weixin_45108907

最新推荐文章于 2024-03-22 11:09:08 发布

阅读量2.9k

点赞数

分类专栏： html结构

本文链接：https://blog.youkuaiyun.com/weixin_45108907/article/details/90517488

版权

这篇博客提供了Vue移动端Tab栏切换的代码结构，包括样式设置和激活状态的处理。通过设置CSS样式，实现了Tab栏的布局和颜色变化，为开发者提供了可以直接使用的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

复制代码结构----供自己直接使用：

<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="c