其他分享
首页 > 其他分享> > 学生管理系统 v1.1

学生管理系统 v1.1

作者:互联网

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学生管理系统</title>
    <link href="../public/css/bootstrap.min.css" rel="stylesheet">
    <link href="../public/css/style.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        .row>div {
            border: 1px solid #000;
        }

        .modal {
            display: block;
            opacity: 1;
            top: 100px;
            overflow: visible;
        }
    </style>
</head>

<body>
    <div id="app">


        <div class="container">
            <table class="table table-striped">
                <caption>学生管理系统v1.0-展示学生</caption>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item,index in arr" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender}}</td>
                    <td><button @click="del(index,item.name)" class="btn btn-danger btn-xs" data-toggle="modal"
                            data-target="#exampleModal" data-whatever="@mdo">删除</button></td>
                </tr>
            </table>



            <hr>
            <hr>
            <hr>
            <form action="">
                <table class="table table-striped">
                    <caption>添加学生信息</caption>
                    <tr>
                        <td>项目</td>
                        <td>信息</td>
                    </tr>
                    <tr>
                        <td>姓名</td>
                        <td>
                            <input type="text" class="form-control" id="stuname" placeholder="姓名" v-model="stuname">
                        </td>
                    </tr>
                    <tr>
                        <td>年龄</td>
                        <td>
                            <input type="number" class="form-control" id="stuage" placeholder="年龄" v-model="stuage">
                        </td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>
                            <label class="gen-span"><input type="radio" class="radio-info" v-model="gender" checked
                                    value="男"> 男</label>
                            <label class="gen-span"><input type="radio" class="radio-info" v-model="gender" value="女">
                                女</label>
                            <label class="gen-span"><input type="radio" class="radio-info" v-model="gender" value="保密">
                                保密</label>
                        </td>
                    </tr>
                </table>
                <div style="text-align: center;"><input @click="add" type="button" class="btn btn-info btn-sm add-btn"
                        value="确定增加" /></div>
            </form>
        </div>
        <!-- :style="{display:isShow?'block':'none'}" -->
        <!-- 删除按钮确认框 v-if 和 v-show 要保持 盒子block状态所以为闪现一下  -->
        <div v-show="isShow" class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true" @click="isShow=!isShow">×</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">确认框</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="message-text" class="control-label">确定要删除<strong class="control-label-name"
                                        style="color:blue">{{arrName}}</strong>吗?</label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"
                            @click="isShow=!isShow">返回</button>
                        <a href="###" class="delete-a"><button type="button" class="btn btn-primary"
                                @click="realDel(arrIndex)">确认</button></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                //显示隐藏模态框
                isShow: false,
                //渲染列表
                arr: [
                    { name: '小明', age: 12, gender: "男" },
                    { name: '小红', age: 10, gender: "女" },
                    { name: '小刚', age: 16, gender: "保密" }
                ],
                //姓名
                stuname: '',
                //年龄
                stuage: '',
                //性别
                gender: '男',
                //数组名字
                arrName: '',
                //数组下标
                arrIndex: ''

            },
            created() {
                console.log('加载');
                //获取存储的数据
                this.arr = JSON.parse(localStorage.getItem('arr'))
            },
            methods: {
                //添加人员
                add() {
                    //判断是否为空
                    if (!this.stuname.trim() || !this.stuage.trim()) {
                        alert('请输入正确的数据')
                        //重置
                        this.stuage = '';
                        this.stuname = '';
                        this.gender = "男"
                        return
                    }
                    //添加数据
                    this.arr.push({
                        name: this.stuname.trim(),
                        age: this.stuage.trim(),
                        gender: this.gender
                    })
                    //重置
                    this.stuage = '';
                    this.stuname = '';
                    this.gender = "男";
                    //数据存储到本地
                    localStorage.setItem('arr', JSON.stringify(this.arr));
                },
                //删除键弹出层
                del(i, name) {
                    this.isShow = !this.isShow;
                    this.arrName = name
                    this.arrIndex = i
                },
                //确认删除
                realDel(i) {
                    this.arr.splice(i, 1);
                    this.isShow = !this.isShow;
                    //数据存储到本地
                    localStorage.setItem('arr', JSON.stringify(this.arr));
                }

            }
        })
    </script>
</body>

</html>

  

标签:stuname,arr,name,管理系统,gender,isShow,学生,v1.1,stuage
来源: https://www.cnblogs.com/Gawainehzh/p/15939047.html