vue 成绩列表 输入成绩，并统计各分数段人数

Question

实现如下页面效果：在“成绩列表”中录入成绩，点击“统计”按钮，显示“统计结果”，“统计结果”包含90分以上的人数、80-89之间的人数，等等。点击“清空”按钮，“成绩列表”和“统计结果”清空
!

Answer 1

引自免费微信小程序：皆我百晓生

为了实现这个功能，我们可以创建一个简单的Vue组件，包括输入框、按钮和表格用于展示统计结果。下面是一个详细的步骤和代码示例。

首先，安装Vue CLI（如果你还没有安装）：

npm install -g @vue/cli

然后创建一个新的Vue项目：

vue create score-statistics
cd score-statistics

接下来，我们创建一个名为ScoreStatistics.vue的组件文件，在src/components目录下，内容如下：

<template>
  <div>
    <h2>成绩列表</h2>
    <input type="number" v-model="scoreInput" placeholder="请输入成绩">
    <button @click="addScore">添加</button>

    <hr>

    <h2>统计结果</h2>
    <table>
      <thead>
        <tr>
          <th>分数段</th>
          <th>人数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(range, count) in statistics" :key="range">
          <td>{{ range }}</td>
          <td>{{ count }}</td>
        </tr>
      </tbody>
    </table>

    <button @click="clearScores">清空</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scores: [],
      scoreInput: '',
      statistics: {
        '90分以上': 0,
        '80-89之间': 0,
        '70-79之间': 0,
        '60-69之间': 0,
        '60分以下': 0,
        '成绩是空的或者是0': 0,
      },
    };
  },
  methods: {
    addScore() {
      if (this.scoreInput && this.scoreInput !== '') {
        const score = parseInt(this.scoreInput);
        if (!isNaN(score)) {
          this.scores.push(score);
          this.updateStatistics();
          this.scoreInput = '';
        }
      } else {
        this.statistics['成绩是空的或者是0'] += 1;
      }
    },
    updateStatistics() {
      this.scores.forEach((score) => {
        if (score >= 90) {
          this.statistics['90分以上'] += 1;
        } else if (score >= 80 && score <= 89) {
          this.statistics['80-89之间'] += 1;
        } else if (score >= 70 && score <= 79) {
          this.statistics['70-79之间'] += 1;
        } else if (score >= 60 && score <= 69) {
          this.statistics['60-69之间'] += 1;
        } else if (score < 60) {
          this.statistics['60分以下'] += 1;
        }
      });
    },
    clearScores() {
      this.scores = [];
      this.scoreInput = '';
      this.statistics = {
        '90分以上': 0,
        '80-89之间': 0,
        '70-79之间': 0,
        '60-69之间': 0,
        '60分以下': 0,
        '成绩是空的或者是0': 0,
      };
    },
  },
};
</script>

<style scoped>
/* Add some basic styling */
input {
  width: 5em;
}
</style>

在这个组件中，我们定义了一个Vue实例，它有两个主要数据属性：scores（存储用户输入的成绩）和statistics（存储统计信息）。我们还定义了三个方法：addScore（添加成绩并更新统计）、updateStatistics（根据当前成绩数组计算统计信息）和clearScores（清除所有成绩和统计信息）。

将此组件引入到主应用中：

1. 在src/App.vue中，替换现有内容为：

<template>
  <div id="app">
    <ScoreStatistics />
  </div>
</template>

<script>
import ScoreStatistics from './components/ScoreStatistics.vue';

export default {
  components: {
    ScoreStatistics,
  },
};
</script>

现在，运行项目：

npm run serve

打开浏览器，你应该能看到一个带有成绩输入框、添加按钮、统计结果表格和清空按钮的应用。每次添加成绩后，都会自动更新统计信息。点击“清空”按钮会清除所有成绩和统计信息。

这就是一个基本的实现，你可以根据需要进一步优化样式和用户体验。