Vue.js实现学生信息录入

浏览器界面

---

image.png

---

代码如下

---

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

            <div>
                <label for="age">年龄：</label>
                <input type="text" id="age" placeholder="请输入学生年龄" v-model="newStudent.age">
            </div>

            <div>
                <label for="gender">性别：</label>
                <select name="" id="gender" v-model="newStudent.gender">
                    <option selected>男</option><!-- 默认性别为男-->
                    <option>女</option>
                </select>
            </div>

            <div>
                <label for="tel">手机：</label>
                <input type="text" id="tel" placeholder="请输入手机号码" v-model="newStudent.tel">
            </div>

            <div>
                <!--点击“创建新用户”，将用户输入的用户信息添加到表格中-->
                <button @click="addNewStudent">创建新用户</button>
            </div>
        </fieldset>

        <br >

        <table>
            <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>手机</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
             <!--表格中的数据从数据中循环得到-->
            <tr v-for="(s, index) in students">
                <td>{{ s.name }}</td>
                <td>{{ s.gender }}</td>
                <td>{{ s.age }}</td>
                <td>{{ s.tel }}</td>
                <td>
                    <!--点击“删除”，删除当前表格中的这条记录-->
                    <button @click="deleteStudent(index)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

<script>
        // 创建Vue的实例
        var app = new Vue({
            el: '#app',
            data: {
                /*学生信息数组*/
                students: [
                    {name: '朱咸武', gender: '男',  age: 18,tel: '18000000000'},
                    {name: '朱瀛洲', gender: '男',  age: 18,tel: '18011111111'},
                    {name: '朱鹏', gender: '男',  age: 18,tel: '15822222222'},
                    {name: '朱俊宇', gender: '女',  age: 18,tel: '15033333333'}
                ],
                /*添加学生信息的模板*/
                newStudent: {
                    name: '',
                    gender: '',
                    age: 18,
                    tel: ''
                }
            },
            methods: {
                // 增加一条学生记录
                addNewStudent: function () {
                    // 简单判断一下
                    // 姓名非空
                    if (this.newStudent.name == '') {
                        alert('请输入学生姓名');
                        return;
                    }
                    // 年龄要大于0
                    if (this.newStudent.age <= 0) {
                        alert('请输入实际年龄');
                        return;
                    }
                    // 检测手机号码非空
                    if(this.newStudent.tel == '') {
                        alert("请输入学生手机号码");
                        return;
                    }
                    // 添加一条数据到students数组中
                    this.students.push(this.newStudent);
                    // 清空记录
                    this.newStudent = {
                        name: '',
                        age: 18,
                        gender: '男',
                        tel: ''
                    }
                },
                // 删除一条学生记录
                deleteStudent: function (index) {
                // index-指students索引，1指删除的数量
                    this.students.splice(index, 1)
                }
            }
        })
    </script>