vue——7-vue案例：学生录用系统

最新推荐文章于 2024-12-29 20:51:29 发布

原创最新推荐文章于 2024-12-29 20:51:29 发布 · 828 阅读

3 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

74 篇文章

订阅专栏

本文介绍了一个使用Vue.js构建的学生信息管理系统，包括学生数据的录入、展示和删除功能。系统通过HTML、CSS和JavaScript实现，提供了直观的用户界面进行数据操作。

这里写图片描述

css

        #enjoy{
            margin: 50px auto;
            width: 600px;
        }
        fieldset{
            border: 1px solid orange;
        }
        fieldset input{
            width: 200px;
            height: 30px;
            margin: 10px 0;
        }
        table{
            width: 600px;
            border: 1px solid orangered;
            text-align: center;
            margin-top: 20px;
        }
        thead{
            background-color: #ff0000;
        }

html

<div id="enjoy">
    <!--第一部分-->
    <fieldset>
        <legend>学生录用系统</legend>
        <div>
            <span>姓名</span>
            <input type="text" placeholder="name" v-model="newPerson.name">
        </div>
        <div>
            <span>年龄</span>
            <input type="number" placeholder="age" v-model="newPerson.age">
        </div>
        <div>
            <span>性别</span>
            <select v-model="newPerson.sex">
                <option value="man">man</option>
                <option value="woman">woman</option>
            </select>
        </div>
        <div>
            <span>num</span>
            <input type="number" placeholder="num" v-model="newPerson.num">
        </div>

        <button @click="createPerson()">创建新用户</button>
    </fieldset>

    <!--第二部分-->
    <table>
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>num</td>
            <td>删除</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(p,index) in person">
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
            <td>{{p.sex}}</td>
            <td>{{p.num}}</td>
            <td>
                <button @click="deletePerson(index)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

js

        {
            new Vue({
                el: '#enjoy',
                data: {
                    person: [
                        {name: 'bob1', age: 10, sex: 'man1', num: 3331},
                        {name: 'bob2', age: 20, sex: 'man2', num: 3332},
                        {name: 'bob3', age: 20, sex: 'man3', num: 3333},
                        {name: 'bob4', age: 30, sex: 'man4', num: 3334}
                    ],
                    newPerson: {name: '', age: '', sex: 'man', num: ''}
                },
                methods:{
                    createPerson(){
                        //姓名不能为空
                        if(this.newPerson.name===''){
                            alert('姓名不能为空');
                            return;
                        }
                        //姓名不能为空
                        if(this.newPerson.age<=0){
                            alert('输入正确年龄');
                            return;
                        }
                        //姓名不能为空
                        if(this.newPerson.num===''){
                            alert('num不能为空');
                            return;
                        }
                        //往数组添加一条新记录
                        this.person.unshift(this.newPerson);
                        //清空数据
                        this.newPerson={name: '', age: 0, sex: '', num: ''};
                    },

                    deletePerson(index){
                        this.person.splice(index,1);
                    }
                }
            })
        }