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数据监听方法watch的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue3+element plus实现侧边栏过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
详解@Vue/Cli 3 Invalid Host header 错误解决办法
这篇文章主要介绍了详解@Vue/Cli 3 Invalid Host header 错误解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
要实现 Vue 自定义组件改变组件背景色,你可以通过 props 将背景色作为组件的一个属性传递给组件,在组件内部监听这个属性的变化,并将其应用到组件的样式中,下面通过示例代码介绍Vue如何实现自定义组件改变组件背景色,感兴趣的朋友一起看看吧2024-03-03
watch是Vue实例的一个属性是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,下面这篇文章主要给大家介绍了关于vue中watch的实际开发笔记,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue中watch监听路由传来的参数变化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了Vue实现搜索结果高亮显示关键字，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要为大家详细介绍了vue实现移动端的开关按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
vue引入新版 vue-awesome-swiper插件填坑问题
这篇文章主要介绍了vue引入新版 vue-awesome-swiper插件填坑问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了Antd的Table组件嵌套Table以及选择框联动操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论