vue中tab选项卡的实现思路-创新互联

今天分享下vue中tab选项卡的套路,废话不多说，直接上效果图

应用场景

•不同注册和登录方式切换
•操作选项切换 如保存和取消
•后台管理系统中各菜单选项切换等
•新闻标题分类切换 如关注 推荐 热点等分类

主要思路

•点击不同 tab 获取 tab 选项卡下标并为其动态绑定一个class(选中状态时的样式)
•点击时使 tab 对应的内容下标与 tab 选项卡下标保持一致
•使用 v-show / v-if 指令控制内容显示与隐藏

代码如下

 
 
 
 
 
 


 

 

  

  

   {{item}}
  
  
 
 

  

  {{itemCon}}
  
 
 
 

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。