学生管理系统 - 在线添加、编辑、删除和搜索学生信息

<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="searchName">
      <button type="button" @click.prevent="searchStudent">查找学生</button>
      <!--<button type="button" @click.prevent="resetSearch">重置查找</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="(item, index) in filteredStudents" :key="index">
        <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>
	let vm = new Vue({
  el: '#app',
  data: {
    students: [],
    newStudent: {
      grade: '',
      name: '',
      gender: '',
      age: ''
    },
    selectedIndex: null,
    filterKeyword: '',
    searchName: ''
  },
  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() {
      const keyword = this.searchName.trim().toLowerCase();
      const result = this.students.filter(student => {
        return student.name.toLowerCase().includes(keyword);
      });
      this.filteredStudents = result;
    },
    reset() {
      this.newStudent = {
        grade: '',
        name: '',
        gender: '',
        age: ''
      };
      this.selectedIndex = null;
      this.searchName = '';
      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>