用vue写一个学生得分汇总的页面

好的，我可以给你一个简单的示例代码，你可以根据自己的需求进行修改和完善。这个页面主要展示学生的得分情况，并且可以实现对学生得分的编辑和保存。

首先，我们需要在HTML页面中定义表格和相关的按钮，代码如下：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>学生姓名</th>
          <th>语文得分</th>
          <th>数学得分</th>
          <th>英语得分</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in students" :key="index">
          <td>{{ student.name }}</td>
          <td>
            <input type="number" v-model="student.chineseScore" :disabled="!isEditing(index)">
          </td>
          <td>
            <input type="number" v-model="student.mathScore" :disabled="!isEditing(index)">
          </td>
          <td>
            <input type="number" v-model="student.englishScore" :disabled="!isEditing(index)">
          </td>
          <td>
            <button @click="editScore(index)" v-if="!isEditing(index)">编辑</button>
            <button @click="saveScore(index)" v-if="isEditing(index)">保存</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

接下来，在Vue实例中定义相关的数据和方法，代码如下：

<script>
export default {
  data() {
    return {
      students: [
        { name: '张三', chineseScore: 80, mathScore: 90, englishScore: 70 },
        { name: '李四', chineseScore: 75, mathScore: 85, englishScore: 80 },
        { name: '王五', chineseScore: 90, mathScore: 95, englishScore: 85 }
      ],
      editingIndex: -1
    }
  },
  methods: {
    isEditing(index) {
      return index === this.editingIndex
    },
    editScore(index) {
      this.editingIndex = index
    },
    saveScore(index) {
      this.editingIndex = -1
    }
  }
}
</script>

在这个示例中，我们定义了一个名为`students`的数组，用来存储学生的得分情况。同时，我们定义了一个名为`editingIndex`的变量，用来记录当前正在编辑的学生的下标。在`isEditing`方法中，我们判断当前行是否正在编辑状态。在`editScore`方法中，我们将当前行设置为编辑状态。在`saveScore`方法中，我们将当前行的编辑状态取消，并保存修改后的得分数据。

这样，我们就完成了一个简单的学生得分汇总页面。你可以根据自己的需求，对这个示例进行修改和完善。