小编给大家分享一下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<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效果的示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注天达云行业资讯频道！