bootstrap vue.js实现tab效果

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

项目目录结构

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

   

     
父亲名
     
{{parentsInfo.fatherName}}
     
母亲名
     
{{parentsInfo.motherName}}
   
 
      
      
 

   

     
全班排名
     
{{studySituation.classSort}}
     
全级排名
     
{{studySituation.gradeSort}}
   
 
      
    
  






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