vue实现成绩显示

Vue 实现成绩显示功能

数据准备与绑定

在 Vue 中，成绩数据通常以数组或对象形式存储在组件的 data 属性中。例如：

data() {
  return {
    scores: [
      { name: '数学', score: 90 },
      { name: '语文', score: 85 },
      { name: '英语', score: 92 }
    ]
  }
}

模板渲染

使用 v-for 指令循环渲染成绩列表，并通过 v-bind 或 : 动态绑定样式或类名：

<ul>
  <li v-for="(item, index) in scores" :key="index">
    {{ item.name }}: {{ item.score }}
  </li>
</ul>

条件样式

根据成绩高低显示不同颜色（如优秀为绿色，及格为黄色）：

<li 
  v-for="(item, index) in scores" 
  :key="index"
  :style="{ color: item.score >= 90 ? 'green' : item.score >= 60 ? 'orange' : 'red' }"
>
  {{ item.name }}: {{ item.score }}
</li>

计算属性

通过计算属性处理复杂逻辑，例如计算平均分：

computed: {
  averageScore() {
    const sum = this.scores.reduce((total, item) => total + item.score, 0);
    return (sum / this.scores.length).toFixed(2);
  }
}

组件化

将成绩列表封装为可复用的子组件：

// ScoreItem.vue
<template>
  <div :class="['score-item', scoreClass]">
    <span>{{ name }}</span>
    <span>{{ score }}</span>
  </div>
</template>

<script>
export default {
  props: ['name', 'score'],
  computed: {
    scoreClass() {
      return this.score >= 90 ? 'excellent' : this.score >= 60 ? 'pass' : 'fail';
    }
  }
}
</script>

动态更新

通过方法实现成绩的动态添加或修改：

methods: {
  addScore() {
    this.scores.push({ name: '新科目', score: 0 });
  },
  updateScore(index, newScore) {
    this.$set(this.scores, index, { ...this.scores[index], score: newScore });
  }
}

完整示例

结合以上内容实现的完整组件：

<template>
  <div>
    <h3>成绩单</h3>
    <ScoreItem 
      v-for="(item, index) in scores" 
      :key="index"
      :name="item.name"
      :score="item.score"
    />
    <p>平均分: {{ averageScore }}</p>
    <button @click="addScore">添加科目</button>
  </div>
</template>

<script>
import ScoreItem from './ScoreItem.vue';

export default {
  components: { ScoreItem },
  data() {
    return {
      scores: [
        { name: '数学', score: 90 },
        { name: '语文', score: 85 },
        { name: '英语', score: 92 }
      ]
    };
  },
  computed: {
    averageScore() {
      const sum = this.scores.reduce((total, item) => total + item.score, 0);
      return (sum / this.scores.length).toFixed(2);
    }
  },
  methods: {
    addScore() {
      this.scores.push({ name: '新科目', score: 0 });
    }
  }
};
</script>