本文實例為大家分享了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<this.length;i++){ if(filter(this[i],i)) idx = i; } } this.splice(idx,1)}var ary=[{id:1,name:"b"},{id:2,name:"b"}];var delid = 2;ary.del(function(obj){ return obj.id == delid;})html頁
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Student Management</title> <link rel="stylesheet" type="text/css" rel="external nofollow" > <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script></head></head><body> <div id="stu" class="container"> <ul class="nav nav-tabs"> <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >基本信息</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >家長信息</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >成績查詢</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade in active"> <table class="table"> <tr> <td class="col-lg-2">姓名</td> <td class="col-lg-4">{{baseInfo.name}}</td> <td class="col-lg-2">性別</td> <td class="col-lg-4">{{baseInfo.sex}}</td> </tr> </table> </div> <div class="tab-pane fade in"> <table class="table"> <tr> <td class="col-lg-2">父親名</td> <td class="col-lg-4">{{parentsInfo.fatherName}}</td> <td class="col-lg-2">母親名</td> <td class="col-lg-4">{{parentsInfo.motherName}}</td> </tr> </table> </div> <div class="tab-pane fade in"> <table class="table"> <tr> <td class="col-lg-2">全班排名</td> <td class="col-lg-4">{{studySituation.classSort}}</td> <td class="col-lg-2">全級排名</td> <td class="col-lg-4">{{studySituation.gradeSort}}</td> </tr> </table> </div> </div> </div></body><script src="js/Student.js"></script><script> var student = new Student(); new Vue({ el : '#stu', data : { baseInfo : student.baseInfo, parentsInfo : student.parentsInfo, studySituation : student.studySituation } , method : { } })</script></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
