使用vue写一个简化版的成绩管理表

在 Vue 中，你可以创建一个简单的成绩管理表来存储和显示学生的信息。下面是一个基础示例，它包括学生名字、科目和分数：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>科目</th>
          <th>分数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in students" :key="index">
          <td>{{ student.name }}</td>
          <td>{{ student.subject }}</td>
          <td>
            <input type="number" v-model="student.score" placeholder="请输入分数">
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="addStudent">添加学生</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { name: '张三', subject: '数学', score: null },
        { name: '李四', subject: '语文', score: null }
      ],
    };
  },
  methods: {
    addStudent() {
      this.students.push({ name: '', subject: '', score: null });
    }
  }
};
</script>

这个组件允许你在表格中编辑每个学生的分数，并能通过点击“添加学生”按钮追加新行。注意，这里使用了 `v-model` 绑定输入框的值到数据对象。