vue的computed总分计算

在Vue框架中，computed属性可以用来实现自动计算总分和平均分。computed属性是基于它的依赖缓存的，只要依赖的属性没有发生变化，计算属性的值就会被缓存起来，下次访问计算属性时就会直接返回缓存的值，而不必重新计算。

下面是一个示例代码，演示了如何使用computed属性计算总分和平均分：

<div id="app">
  <input v-model="math" type="number" placeholder="请输入数学成绩">
  <input v-model="english" type="number" placeholder="请输入英语成绩">
  <input v-model="physics" type="number" placeholder="请输入物理成绩">
  
  <p>总分：{{ total }}</p>
  <p>平均分：{{ average }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      math: 0,
      english: 0,
      physics: 0
    },
    computed: {
      total: function() {
        return parseInt(this.math) + parseInt(this.english) + parseInt(this.physics);
      },
      average: function() {
        return this.total / 3;
      }
    }
  });
</script>

在上述代码中，我们定义了一个Vue实例，包含了三个数据属性：math、english、physics，分别表示数学成绩、英语成绩和物理成绩。通过v-model指令，将输入框与这些数据属性进行双向绑定。

然后，我们使用computed属性来定义计算属性。total计算属性用来计算总分，通过将math、english和physics属性相加得到结果。average计算属性用来计算平均分，通过将total除以3得到结果。

最后，在页面中使用{{ total }}和{{ average }}来显示计算结果。