利用vue.js,实现一个自动计算总分和平均分的页面：有若干个学生，当任一同学输入的成绩有改变时，自动重新计算总分和平均分。

在Vue.js中实现这样的功能，你可以创建一个组件，其中包含每个学生的姓名、成绩，并且数据双向绑定，当用户输入成绩时，会实时更新总分和平均分。这里是一个简单的示例：

首先，你需要安装Vue.js库，如果还没有，可以运行`npm install vue`。

1. 创建一个Vue实例并设置数据：

<template>
  <div id="app">
    <h1>学生信息</h1>
    <ul>
      <li v-for="(student, index) in students" :key="index">
        <input type="number" v-model="student.score" @input="calculateTotals(index)">
        <p>{{ student.name }}: {{ student.score }}</p>
      </li>
    </ul>
    <p>总分: {{ totalScore }}</p>
    <p>平均分: {{ averageScore }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { name: '学生1', score: 0 },
        { name: '学生2', score: 0 },
        // 添加更多学生...
      ],
      totalScore: 0,
      averageScore: 0
    };
  },
  methods: {
    calculateTotals(index) {
      this.totalScore += this.students[index].score;
      if (this.students.length > 0) {
        this.averageScore = this.totalScore / this.students.length;
      }
    }
  }
};
</script>

在这个例子中，我们使用了v-model指令绑定到数据属性，使得输入框的内容变化会自动同步到对应的`score`值上。`@input`事件监听器会在每次输入改变时触发`calculateTotals`方法，用于累加总分和计算平均分。