<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合案例成绩查询</title>
    <style type="text/css">
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>综合案例-成绩查询</h2>
        <div class="form">
            <label for="subject">科目</label>
            <input type="text" id="subject" v-model.trim="subject" placeholder="请输入科目" @keyup.enter="btnAdd">
            <label for="score">成绩</label>
            <input type="text" id="score" v-model.number="score" placeholder="请输入成绩" @keyup.enter="btnAdd">
            <button class="submit" @click="btnAdd">添加</button>
        </div>
        <br>
        <div class="table">
            <table border="1" width="50%" style="text-align: center;">
                <thead>
                    <tr style="background-color: lightgray">
                        <th>编号</th>
                        <th>科目</th>
                        <th>成绩</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody v-if="list.length > 0">
                    <tr v-for="(item,index) in list" :key="item.id">
                        <td>{{ index + 1}}</td>
                        <td>{{ item.subject }}</td>
                        <td :class="{ red : item.score < 60}">{{ item.score }}</td>
                        <td><a href="#" @click.prevent="del(item.id)">删除</a></td>
                    </tr>
                </tbody>
                <tbody v-else>
                    <tr>
                        <td colspan="4">暂无数据</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="2">总分：{{ totalScore }} </td>
                        <td colspan="2">平均分：{{ averageScore }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,subject:'语文',score:20},
                    {id:7,subject: '数学',score: 70},
                    {id:12,subject:'英语',score:90}
                ],
                subject:'',
                score :''
            },
            methods:{
                del(id){
                    this.list = this.list.filter( item => item.id !== id);
                },
                btnAdd() {
                    //先判断
                    if(!this.subject){
                        alert('请输入科目');
                        return
                    }
                    if(typeof this.score !== 'number'){
                        alert('请输入正确的成绩');
                        return
                    }
                    //添加
                    this.list.unshift({
                        id: + new Date(),
                        subject :this.subject,
                        score : this.score
                    });
                    //清空
                    this.subject = '';
                    this.score = '';
                }
            },
            computed:{
                totalScore(){
                    return this.list.reduce( (sum,item) => sum + item.score ,0);
                },
                averageScore(){
                    if(this.list.length === 0) {
                        return 0;
                    }
                    return (this.totalScore / this.list.length).toFixed(2)
                }
            }
        })
    </script>
</body>
</html>

# vue.js # 前端 # javascript
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云Stack8.3面向香港正式发布，六大亮点激发云上跃迁

avatar 华为云开发者联盟
cover

6个实例带你解读TinyVue 组件库跨框架技术

avatar 华为云开发者联盟
cover

GaussDB SQL查询语句执行过程解析

avatar 华为云开发者联盟