vue用v-for用实现学员信息管理，有添加和重置按钮，并在下方表单中显示出来

在Vue.js中，使用`v-for`指令可以动态地渲染列表，非常适合实现学员信息管理的功能。假设我们有一个数组`students`存储学员数据，我们可以这样做：

首先，在HTML模板部分：

<template>
  <div>
    <h2>学员信息管理</h2>
    <button @click="addStudent">添加学员</button>
    <button @click="resetStudents">重置所有学员</button>

    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>邮箱</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in students" :key="index">
          <td>{{ student.id }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.email }}</td>
        </tr>
      </tbody>
    </table>
    
    <!-- 表单区域 -->
    <form @submit.prevent="addNewStudent">
      <input type="text" v-model="newStudentName" placeholder="姓名">
      <input type="email" v-model="newStudentEmail" placeholder="邮箱">
      <button type="submit">添加学员</button>
    </form>
  </div>
</template>

然后，在对应的JavaScript文件中设置数据和方法：

<script>
export default {
  data() {
    return {
      students: [], // 初始化空的学员数组
      newStudentName: '',
      newStudentEmail: ''
    };
  },
  methods: {
    addStudent: function() {
      this.students.push({ id: Date.now(), name: '', email: '' });
    },
    resetStudents: function() {
      this.students = [];
    },
    addNewStudent: function(e) {
      if (this.newStudentName && this.newStudentEmail) {
        const newStudent = { id: Date.now(), name: this.newStudentName, email: this.newStudentEmail };
        this.students.push(newStudent);
        this.newStudentName = '';
        this.newStudentEmail = '';
      }
    }
  }
};
</script>

这个例子中，`v-for`用于循环遍历每个学员并显示在表格中。添加和重置按钮触发相应的事件，新学员表单提交时会将新创建的数据添加到`students`数组。