学生管理系统 - 在线添加、修改、删除学生信息

<div id="app">
    <h2>学生管理系统</h2>
    <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>
    <hr>
    <form>
      <label>姓名:</label>
      <input type="text" v-model="filterKeyword">
      <button type="button" @click.prevent="searchStudent">查找学生</button>
      <button type="button" @click.prevent="resetFilter">重置查找</button>
    </form>
    <hr>
    <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="(student, index) in filteredStudents" :key="index">
        <td>{{ student.grade }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.gender }}</td>
        <td>{{ student.age }}</td>
        <td>
          <button type="button" @click.prevent="editStudent(index)">修改</button>
          <button type="button" @click.prevent="delStudent(index)">删除</button>
        </td>
      </tr>
    </table>
  </div>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      students: [],
      newStudent: {
        grade: '',
        name: '',
        gender: '',
        age: ''
      },
      selectedIndex: null,
      filterKeyword: ''
    },
    methods: {
      addStudent() {
        this.students.push(this.newStudent);
        this.reset();
      },
      editStudent(index) {
        this.newStudent = Object.assign({}, this.students[index]);
        this.selectedIndex = index;
      },
      updateStudent() {
        if (this.selectedIndex === null) {
          alert("请先选择要修改的学生！");
        } else {
          this.students.splice(this.selectedIndex, 1, this.newStudent);
          this.reset();
        }
      },
      delStudent(index) {
        const name = this.students[index].name;
        const confirmed = confirm(`是否删除学生 ${name} 的信息？`);
        if (confirmed) {
          this.students.splice(index, 1);
        }
      },
      searchStudent() {
        this.filterKeyword = this.filterKeyword.trim();
      },
      reset() {
        this.newStudent = {
          grade: '',
          name: '',
          gender: '',
          age: ''
        };
        this.selectedIndex = null;
      },
      resetFilter() {
        this.filterKeyword = '';
      }
    },
    computed: {
      filteredStudents() {
        if (this.filterKeyword.trim() === '') {
          return this.students;
        } else {
          const keyword = this.filterKeyword.trim();
          return this.students.filter(student => {
            return student.name.includes(keyword);
          });
        }
      }
    }
  });

</script>