django学习（二）之分页、vue.js数据绑定及模态对话框的使用

最新推荐文章于 2023-06-12 18:17:07 发布

焦躁的小黑猫

最新推荐文章于 2023-06-12 18:17:07 发布

阅读量2.3k

点赞数 2

分类专栏： Python开发

本文链接：https://blog.csdn.net/yin8809/article/details/77853280

版权

最近，学习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>

最低0.47元/天解锁文章

焦躁的小黑猫

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
django学习（二）之分页、vue.js数据绑定及模态对话框的使用

最近，学习Python Django部分，需要分页、模态框运用、及vue.js数据绑定实现效果如下：一个模拟学生信息展示的界面，通过‘添加学员’的按钮弹出学员注册的模态框代码实现如下：1、index.html:html>lang="en"> charset="UTF-8"> Title type="text/j
复制链接

扫一扫