小编给大家分享一下bootstrap vue.js实现tab效果的示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
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<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" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.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>
以上是“bootstrap vue.js实现tab效果的示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
