利用vue指令实现学生信息录入系统

最新推荐文章于 2023-05-10 21:47:04 发布

李先坤

最新推荐文章于 2023-05-10 21:47:04 发布

阅读量1.9k

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43391261/article/details/127684899

版权

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;

        }

        fieldset {
            width: 45%;
            margin: 20px auto;
            border-color: #6495ED;
            padding: 10px;
            box-sizing: border-box;
        }

        input {
            width: 250px;
            height: 30px;
            outline: none;
            border: 1px solid gray;
            border-radius: 3px;
        }

        li {
            margin-bottom: 20px;
        }

        button {
            width: 90px;
            height: 30px;
            color: white;
            background-color: rgb(23, 175, 236);
            border-radius: 3px;
            border: none;
            cursor: pointer;
        }

        table {
            width: 45%;
            margin: 20px auto;
            border: 2px solid rgb(23, 175, 236);
            text-align: center;
        }

        thead {
            background-color: rgb(23, 175, 236);
            color: #fff;
            line-height: 40px;
        }

        tr {
            line-height: 35px;
        }

        tr:nth-of-type(2n) {
            background-color: #EBEBEB;
        }

        span {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <fieldset>
            <legend>学生信息录入系统</legend>
            <ul>
                <li>姓名：<input type="text" placeholder="2到10位用户名" v-model="student.name"><span
                        v-show="bolname">请输入2到10位字符</span></li>
                <li>年龄：<input type="text" placeholder="请输入年龄" v-model="student.age"><span
                        v-show="bolage">请输入正确的年龄</span>
                </li>
                <li>性别：<select v-model="student.sex">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </li>
                <li>手机：<input type="text" placeholder="请输入手机号" v-model="student.phone"><span
                        v-show="bolphone">请输入正确的手机号</span></li>
                <li><button @click="btnuser">添加用户</button></li>
            </ul>
        </fieldset>

        <!-- 信息内容 -->
        <table cellspacing="0">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>手机</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in stuinfo">
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.phone}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
                <!-- <tr>
                    <td>赵虎</td>
                    </td>
                    <td>女</td>
                    <td>20</td>
                    <td>15224711693</td>
                    <td><button>删除</button></td>
                </tr> -->
            </tbody>
        </table>
    </div>
</body>

</html>
<script src="./lib/vue.js"></script>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            // 学生信息表数据
            stuinfo: [
                { name: '张龙', age: '25', sex: '男', phone: '15224711692' },
                { name: '李四', age: '18', sex: '女', phone: '15224711693' },
                { name: '屌丝', age: '85', sex: '女', phone: '15224711694' },
                { name: '胡说', age: '45', sex: '男', phone: '15224711695' },
                { name: '智慧', age: '5', sex: '男', phone: '15224711696' }
            ],
            // 获取input 输入框内容
            student: { name: '', age: '', sex: '男', phone: '' },
            // 分别控制用户名 年龄 手机号 输入不合法是的提示信息  false 隐藏 true 显示
            bolname: false,
            bolage: false,
            bolphone: false
        },
        methods: {
            btnuser() {
                // 正则表达式 验证输入是否规范
                // 用户名
                let username = /[\u4e00-\u9fa5]{2,10}/gm;
                // 年龄
                let ages = /^([0-9]|[0-9]{2}|100)$/;
                // 手机号
                let phonenum = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
                // 用户名判断 不合法 将bolname 为true 
                if (!(username.test(this.student.name))) {
                    this.bolname = true;
                    return;
                } else {
                    this.bolname = false;
                }
                if (!(ages.test(this.student.age))) {
                    this.bolage = true;
                    return;
                } else {
                    this.bolage = false;
                }
                if (!(phonenum.test(this.student.phone))) {
                    this.bolphone = true;
                    return;
                } else {
                    this.bolphone = false;
                }
                // 点击添加时 将信息添加到学生信息表的首位
                this.stuinfo.unshift(this.student);
                // 将input 框内容 清空
                this.student = { name: '', age: '', sex: '男', phone: '' };
            },
            del(index) {
                // 点击删除将 将信息删除
                this.stuinfo.splice(index, 1);
                // console.log(this.stuinfo[index]);
            }

        }
    });
</script>