学生信息录入系统的插入，删除

最新推荐文章于 2022-11-14 19:53:23 发布

hanni_xie

最新推荐文章于 2022-11-14 19:53:23 发布

阅读量629

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/hanni_xie/article/details/104939689

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

                        
                     
     <fieldset>
        <legend>学生信息录入系统</legend>
        <div>
            <span>姓名:</span>
            <input type="text" placeholder="请输入姓名" v-model="newStudent.name">
        </div>

        <div>
            <span>年龄:</span>
            <input type="text" placeholder="请输入年龄" v-model="newStudent.age">
        </div>

        <div>
            <span>性别:</span>
            <select v-model="newStudent.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <span>手机:</span>
            <input type="text" placeholder="请输入手机号码" v-model="newStudent.phone">
        </div>
        <button @click="createNewStudent()">创建新用户</button>
    </fieldset>
 
    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>手机</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody>
        <tr v-for="(p,index) in persons">
            <td>{{p.name}}</td>
            <td>{{p.sex}}</td>
            <td>{{p.age}}</td>
            
            <td>
                <button @click="deleteStudentMsg(index)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                persons:[
                    {name:'张三',age:20,sex:'男',},
                    {name:'李四',age:20,sex:'男',},
                    {name:'王五',age:20,sex:'男',},
                    {name:'赵六',age:20,sex:'女',},
                ],
                newStudent : {name:'',age:0,sex:'男',phone:''}
            },
            methods: {
                //创建一条新纪录
               createNewStudent(){
               
                    if(this.newStudent.name ==='') {
                        alert('姓名不能为空');
                        return;
                    }

                    
                    if(this.newStudent.age <= 0) {
                        alert('请输入正确的年龄');
                        return;
                    }

                    if(this.newStudent.phone ==='') {
                        alert('手机号码不正确');s
                        return;
                    }


                    //往数组中添加一条新纪录
                    this.persons.unshift(this.newStudent);
                    //清空记录
                    this.newStudent = {name:'',age:0,sex:'男',phone:''}
                },
                //删除一条学生记录
                deleteStudentMsg(index) {
                    this.persons.splice(index,1);
                }
            }
        });
    </script>
 