基于Vue.js实现tab滑块效果

本文实例为大家分享了Vue.js实现tab滑块效果的具体代码，供大家参考，具体内容如下

 
 
 
 
 
  *{margin:0;padding:0;}
  #tabPanel .itemname{height:40px;width:180px;margin-bottom:10px;}
  #tabPanel .itemcontent{height:40px;width:180px;}
  #tabPanel .addbtn{width:100px;height:30px;}
  #tabPanel .active{background:#eee;}
  #tabPanel{height:340px;width:500px;margin:100px auto;}
  #tabPanel .tab{height:40px;background:#ccc;margin-top:10px;}
  #tabPanel .tab ul li{list-style: none;float:left;width:80px;height:40px;text-align:center;line-height:40px;}
  #tabPanel .content{height:300px;width:500px;background:#eee;}
 
 


 
  添加滑块名称：

  添加滑块内容：

  
  
   

    
{{value}}
   
  
  
   {{value+index}}
  
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。