computed计算属性_学生成绩计算页面（Vue3.0）

<template>
  <div>
    <h2>学生成绩计算页面</h2>
    <input type="text" v-model.number="studentScore.java" placeholder="Java成绩">
    <input type="text" v-model.number="studentScore.frontend" placeholder="前端成绩">
    <input type="text" v-model.number="studentScore.backend" placeholder="后端成绩">
    <input type="text" v-model.number="studentScore.ai" placeholder="AI成绩">
    <div>总成绩: {{ totalScore }}</div>
    <div>平均成绩: {{ averageScore }}</div>
  </div>
</template>
 
<script>
import { reactive, computed } from 'vue';
 
export default {
  setup() {
    // 使用reactive创建响应式对象
    const studentScore = reactive({
      java: 0,
      frontend: 0,
      backend: 0,
      ai: 0
    });
 
    // 计算总成绩
    const totalScore = computed(() => {
      return studentScore.java + studentScore.frontend + studentScore.backend + studentScore.ai;
    });
 
    // 计算平均成绩
    const averageScore = computed(() => {
      const total = totalScore.value;
      return total > 0 ? total / 4 : 0;
    });
 
    // 返回响应式对象和计算属性
    return {
      studentScore,
      totalScore,
      averageScore
    };
  }
};
</script>

这段代码使用Vue3的Composition API实现了与原代码相同的功能，展示了如何定义响应式数据和计算属性。使用reactive创建响应式对象studentScore，用户可以输入各科成绩。计算总成绩的计算属性totalScore和计算平均成绩的计算属性averageScore都是基于studentScore的。这个例子简洁明了，并且遵循了现代前端开发的最佳实践。