bootstrap vue.js实现tab效果
更新时间：2017年02月07日 10:29:23 作者：stevennest
这篇文章主要为大家详细介绍了bootstrap vue.js实现tab效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
本文实例为大家分享了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" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="external nofollow" >
<script src="http://9i0i.com/pic.php?p=https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script src="http://9i0i.com/pic.php?p=https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://9i0i.com/pic.php?p=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="http://9i0i.com/pic.php?p=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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
本文主要介绍了Element框架el-tab点击标签页时再渲染问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要为大家详细介绍了Vue仿百度搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
element UI 中的 el-tree 实现 checkbox&n
在日常项目开发中，会经常遇到，树形结构的查询方式，为了快速方便开发，常常会使用到快捷的ui组件去快速搭树形结构，这里我用的是 element ui 中的 el-tree，对element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数的方法感兴趣的朋友跟随小编一起看看吧2022-09-09
这篇文章主要为大家详细介绍了vue+elementUI组件table实现前端分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
Font Awesome是一套流行的图标字体库,我们在实际开发的过程中会经常遇到需要使用图标的场景,对于一些常用的图标,我们可以直接在Font Awesome中找到并且使用,这篇文章主要给大家介绍了关于Vue开发项目中如何使用Font Awesome5的相关资料,需要的朋友可以参考下2021-11-11
vue2.0 与 bootstrap datetimepicker的结合使用实例
本篇文章主要介绍了vue2.0 与 bootstrap datetimepicker的结合使用实例，非常具有实用价值，需要的朋友可以参考下2017-05-05
这篇文章主要介绍了vue3双向绑定实现原理解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue中data数据之间如何赋值问题，具有很好的参考价值，希望对大家有所帮助。2022-09-09
这篇文章主要介绍了vue+iview 实现可编辑表格的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了vue双向绑定及观察者模式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
最新评论