Vue.js 学生管理系统 - 添加、修改、删除学生信息

<script src='../vue.js' type='text/javascript' charset='utf-8'></script>
<div id='app'>
    <form>
        <label>班级:</label>
        <input type='text' v-model='newStudent.grade'>
        <label>姓名:</label>
        <input type='text' v-model='newStudent.name'>
        <label>性别:</label>
        <input type='text' v-model='newStudent.gender'>
        <label>年龄:</label>
        <input type='text' v-model='newStudent.age'>
        <button type='button' @click.prevent='addStudent'>添加学生</button>
        <button type='button' @click.prevent='updateStudent'>确认修改</button>
        <button type='button' @click.prevent='reset'>重置表单</button>
    </form>
    <table border='1' width='50%' style='border-collapse: collapse;'>
        <tr>
            <th>班级</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr align='center' v-for='(item, index) in students'>
            <td>{{item.grade}}</td>
            <td>{{item.name}}</td>
            <td>{{item.gender}}</td>
            <td>{{item.age}}</td>
            <td>
                <button type='button' @click.prevent='editStudent(index)'>修改</button>
                <button type='button' @click.prevent='delStudent(index)'>删除</button>
            </td>
        </tr>
    </table>
</div>
<script type='text/javascript'>
    let vm = new Vue({
        el: '#app',
        data: {
            students: [],
            newStudent: {
                grade: '',
                name: '',
                gender: '',
                age: ''
            },
            selectedIndex: null
        },
        methods: {
            addStudent() {
                this.students.push(this.newStudent);
                this.reset();
            },
            updateStudent() {
                if (this.selectedIndex === null) {
                    alert('请先选择要修改的学生！');
                } else {
                    this.students.splice(this.selectedIndex, 1, this.newStudent);
                    this.reset();
                }
            },
            editStudent(index) {
                this.newStudent = Object.assign({}, this.students[index]);
                this.selectedIndex = index;
            },
            delStudent(index) {
                this.students.splice(index, 1);
            },
            reset() {
                this.newStudent = {
                    grade: '',
                    name: '',
                    gender: '',
                    age: ''
                };
                this.selectedIndex = null;
            }
        }
    });
</script>