亲宝软件园·资讯

展开

vue 学生录入系统

Annaluo 人气:0

一、功能描述:

1,对于输入的内容进行简单的判断。

2,实现简单的增加和删除功能。

二、运行情况

图1 页面初始化情况

点击"添加新用户"如下:

图2: 添加一个新用户

图3:删除Anna和张三两个用户

全部代码如下所示:(直接复制到一个.html文件即可成功运行)

<!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>01-VUE的常用指令-综合练习</title>
    <style>
        #app {margin: 50px auto; width: 600px;}
        fieldset {border: 1px solid orangered;margin-bottom:20px;}
        fieldset input{width: 200px; height: 30px; margin: 10px 0;}
        table{width: 600px;border: 2px solid orangered; text-align: center;}
        thead{background-color: orangered;}
    </style>
</head>
<body>
    <div id="app">
        <!-- 第一部分 -->
        <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>男</option>
                    <option>女</option>
                </select>
            </div>
            
            <div>
                <span>手机:</span>
                <input type="text" placeholder="请输入手机号" v-model="newStudent.phone">
            </div>
            <div>
                <button @click="createNewStu()">添加新用户</button>
            </div>
        </fieldset>
        <!-- 第二部分 -->
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>手机</td>
                    <td>删除</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(stu,index) in students" :key="index">
                    <td>{{stu.name}}</td>
                    <td>{{stu.sex}}</td>
                    <td>{{stu.age}}</td>
                    <td>{{stu.phone}}</td>
                    <td>
                        <button @click="delStudent(index)"> 删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <script src="lib/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                students:[
                    {name:'张三',sex:'男',age:20,phone:'18722222'},
                    {name:'李四',sex:'女',age:10,phone:'18733333'},
                    {name:'王五',sex:'女',age:24,phone:'18744444'},
                    {name:'赵六',sex:'男',age:25,phone:'18755555'}
                ],
                newStudent:{name:'',sex:'男',sge:'0',phone:''}
            },
            methods:{
                //插入记录
                createNewStu(){
                    //1,姓名不能为空
                    if(this.newStudent.name === ''){
                        alert('姓名不能为空');
                        return;
                    }
 
                    //2,验证年龄
                    if(this.newStudent.age <= 0){
                        alert('请输入正确的年龄');
                        return;
                    }
                    //3,验证手机号
                    if(this.newStudent.phone ===''){
                        alert('请输入正确的手机号');
                        return;
                    }
 
                    //4,插入新纪录
                    this.students.unshift(this.newStudent);
 
                    //5,清除记录
                    this.newStudent = {name:'',sex:'男',sge:'0',phone:''};
                },
                delStudent(index){
                    this.students.splice(index,1);
                }
            }
        });
    </script>
</body>
</html>

相关JS代码如下:

<script>
        new Vue({
            el:'#app',
            data:{
                students:[
                    {name:'张三',sex:'男',age:20,phone:'18722222'},
                    {name:'李四',sex:'女',age:10,phone:'18733333'},
                    {name:'王五',sex:'女',age:24,phone:'18744444'},
                    {name:'赵六',sex:'男',age:25,phone:'18755555'}
                ],
                newStudent:{name:'',sex:'男',sge:'0',phone:''}
            },
            methods:{
                //插入记录
                createNewStu(){
                    //1,姓名不能为空
                    if(this.newStudent.name === ''){
                        alert('姓名不能为空');
                        return;
                    }
 
                    //2,验证年龄
                    if(this.newStudent.age <= 0){
                        alert('请输入正确的年龄');
                        return;
                    }
                    //3,验证手机号
                    if(this.newStudent.phone ===''){
                        alert('请输入正确的手机号');
                        return;
                    }
 
                    //4,插入新纪录
                    this.students.unshift(this.newStudent);
 
                    //5,清除记录
                    this.newStudent = {name:'',sex:'男',sge:'0',phone:''};
                },
                delStudent(index){
                    this.students.splice(index,1);
                }
            }
        });
    </script>

加载全部内容

相关教程
猜你喜欢
用户评论