bootstrap + js类 + vue.js实现tab

最新推荐文章于 2025-06-02 09:18:03 发布

原创最新推荐文章于 2025-06-02 09:18:03 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的学生信息管理系统，使用了HTML、CSS、JavaScript等前端技术实现。系统包括学生基本信息、家长信息及成绩查询等功能，通过Vue.js实现了数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目目录结构
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">
    <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="#">基本信息</a></li>
            <li><a href="#">家长信息</a></li>
            <li><a href="#">成绩查询</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>