小编给大家分享一下bootstrap vue.js实现tab效果的示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司致力于成都网站建设、做网站,成都网站设计,集团网站建设等服务标准化，推过标准化降低中小企业的建站的成本，并持续提升建站的定制化服务水平进行质量交付，让企业网站从市场竞争中脱颖而出。 选择创新互联公司，就选择了安全、稳定、美观的网站建设服务！

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

具体内容如下

项目目录结构

Student.js代码

function Student(){
  this.baseInfo = {
    tabStatus : true ,
    name : '张三',
    sex : 'male'
  } ,
  this.parentsInfo = {
    tabStatus : false,
    fatherName : '张全蛋',
    motherName : '李铁柱'
  } ,
  this.studySituation = {
    tabStatus : false,
    classSort : 1,
    gradeSort : 2
  }
}

CommonUtil.js代码

Array.prototype.del = function(filter){
 var idx = filter;
 if(typeof filter == 'function'){
  for(var i=0;i
html页



  
  
  
  
  
  
  



  
    
      基本信息
      
家长信息
      
成绩查询
    
    
      
        
          
            姓名
            {{baseInfo.name}}
            性别
            {{baseInfo.sex}}