bootstrap vue.js实现tab效果
更新时间：2017年02月07日 10:29:23 作者：stevennest
这篇文章主要为大家详细介绍了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<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue自定义v-has指令,做按钮权限判断的步骤，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了使用 vue-i18n 切换中英文效果，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
今天小编就为大家分享一篇Vue 使用beforeEach实现登录状态检查功能，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要为大家详细介绍了vue+echarts实现3D柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vite.config.ts加载.env环境变量方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了Vue开发指南之重点知识梳理，对Vue框架感兴趣的同学，可以参考下2021-05-05
vue中利用pinyin-pro纯前端实现拼音的模糊搜索功能
这篇文章主要介绍了vue中利用pinyin-pro纯前端实现拼音的模糊搜索,实现思路很简单，通过安装配置插件编写工具类，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue 手机物理监听键+退出提示代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要给大家分享将 prop 限制为类型列表、默认内容和扩展点、使用引号观察嵌套值、知道何时使用 v-if、单作用域 slot 的简写、有条件地渲染slot等25 个Vue 技巧，下文是下相关资料,需要的朋友可以参考一下2021-11-11
最新评论