使用Vue.js制作一个成绩管理系统

最新推荐文章于 2025-02-24 18:55:15 发布

杀人鲸ORCA

最新推荐文章于 2025-02-24 18:55:15 发布

阅读量1.1k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_60597540/article/details/137198869

版权

本文详细介绍了如何使用Vue.js框架开发一个包含成绩录入、显示总分和平均分功能的管理系统，包括设置环境、创建Vue实例、设计页面结构、数据绑定和实现基础数据逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在本教程中，我们将使用Vue.js框架来制作一个简单的成绩管理系统。这个系统将允许用户录入学生的成绩，并且能够显示总分和平均分。我们将会使用Vue.js来管理数据和渲染页面，以及利用一些基本的HTML和CSS来构建用户界面。

步骤一：设置环境

首先，确保你的项目中已经安装了Vue.js。你可以通过以下方式引入Vue.js：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

步骤二：创建Vue实例

在HTML文件中，创建一个Vue实例，用于管理数据和渲染页面。

<div id="app">
    <!-- 页面内容将会在这里渲染 -->
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            // 在这里定义需要管理的数据
        },
        methods: {
            // 在这里定义处理用户交互的方法
        }
    });
</script>

步骤三：设计页面结构

设计页面的HTML结构，包括表单用于录入成绩和表格用于显示成绩。

<div id="app">
    <h1>成绩管理系统</h1>
    
    <form>
        <!-- 表单字段 -->
    </form>
    
    <table>
        <!-- 表格内容 -->
    </table>
    
    <div class="average">
        <!-- 总分和平均分 -->
    </div>
</div>

步骤四：实现数据绑定

使用Vue.js的数据绑定功能，将数据与页面元素进行关联。

<form @submit.prevent="addGrade">
    <input type="text" v-model="newGrade.id" placeholder="编号" required>
    <select v-model="newGrade.subject" required>
        <option value="" disabled selected>选择科目</option>
        <option value="语文">语文</option>
        <option value="数学">数学</option>
        <option value="英语">英语</option>
    </select>
    <input type="text" v-model="newGrade.name" placeholder="姓名" required>
    <input type="number" v-model.number="newGrade.score" placeholder="成绩" required>
    <input type="submit" value="录入成绩">
</form>

<table>
    <thead>
        <tr>
            <th>编号</th>
            <th>科目</th>
            <th>姓名</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(grade, index) in grades" :key="index">
            <td>{{ grade.id }}</td>
            <td>{{ grade.subject }}</td>
            <td>{{ grade.name }}</td>
            <td>{{ grade.score }}</td>
            <td>
                <button @click="removeGrade(index)">删除</button>
            </td>
        </tr>
    </tbody>
</table>

<div class="average">
    <span>总分: {{ totalScore }}</span>
    <span>平均分: {{ averageScore }}</span>
</div>

步骤五：实现数据逻辑

在Vue实例中，定义数据和处理方法。

new Vue({
    el: '#app',
    data: {
        grades: [], // 存储成绩的数组
        newGrade: { id: '', subject: '', name: '', score: '' } // 新成绩的对象
    },
    computed: {
        // 计算总分
        totalScore() {
            return this.grades.reduce((total, grade) => total + parseInt(grade.score), 0);
        },
        // 计算平均分
        averageScore() {
            if (this.grades.length === 0) {
                return 0;
            }
            return (this.totalScore / this.grades.length).toFixed(2);
        }
    },
    methods: {
        // 添加成绩
        addGrade() {
            if (this.newGrade.id && this.newGrade.subject && this.newGrade.name && !isNaN(this.newGrade.score)) {
                this.grades.push({
                    id: this.newGrade.id,
                    subject: this.newGrade.subject,
                    name: this.newGrade.name,
                    score: parseInt(this.newGrade.score)
                });
                this.newGrade.id = '';
                this.newGrade.subject = '';
                this.newGrade.name = '';
                this.newGrade.score = '';
            }
        },
        // 删除成绩
        removeGrade(index) {
            this.grades.splice(index, 1);
        }
    }
});