Vue.js tab实现选项卡切换

本文为大家分享了Vuejs 组件化开发tab组件实例，供大家参考，具体内容如下

 
 
 
 
 
 
 * {
 margin: 0;
 padding: 0;
 }

 #tabPanel .itemname {
 height: 40px;
 width: 180px;
 margin-bottom: 10px;
 }

 #tabPanel .itemcontent {
 height: 40px;
 width: 180px;
 }

 #tabPanel .addbtn {
 margin: 10px 0 0 95px;
 width: 185px;
 height: 40px;
 }

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




 
 
 
 

 
 
 

如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

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