最近,学习Python Django部分,需要分页、模态框运用、及vue.js数据绑定
实现效果如下:
一个模拟学生信息展示的界面,通过‘添加学员’的按钮弹出学员注册的模态框
代码实现如下:
1、index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="/static/js/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="/static/js/vue.min.js"></script> <script type="text/javascript" src="/static/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/static/css/register.css"> <link rel="stylesheet" type="text/css" href="/static/css/index.css"> </head> <body> <!--头部,包含标题和搜索框--> <div class="top content_size"> <p id = 'title' class="col-md-8 text-left" style="font-size: 24px;"> 学生信息展示 </p> <div class="input-group col-md-3 text-right search"> <input id="searchText" type="text" class="form-control clearPardding content_size" placeholder="请输入学生年龄"> <span class="input-group-btn clearPardding"> <button id="searchButton" class="btn btn-info">查询</button>