46-作业讲解-计算总成绩和平均分-Computed属性

longfei815

已于 2022-07-23 14:12:13 修改

阅读量309

点赞数 2

分类专栏：前端基础知识文章标签：前端 javascript html

于 2022-07-03 11:54:30 首次发布

本文链接：https://blog.csdn.net/jolinoy/article/details/125582934

版权

前端基础知识专栏收录该内容

75 篇文章 2 订阅

订阅专栏

46-作业讲解-计算总成绩和平均分

效果如下图：

下面是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv=" X-UA-Compatible" content="ie=edge">
    <title>46-作业讲解-计算总成绩和平均分</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
    <style>
        table,tr,th,td{
            border: 2px solid #000;
            /* 设置表格线条粗细，形状，颜色 */
        }
        table{
            border-collapse: collapse;
            /* collapse值作用:如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 */
        }
        th,td{
            padding: 10px;
            /* 设置表格中单元格间距 */
        }
        td{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id='app'>
        <table>
            <tr>
                <th v-for="item in titles">{{item}}</th>
            </tr>
            <tr v-for="item in arr">
                <td>{{item.name}}</td>
                <td>{{item.math}}</td>
                <td>{{item.chinese}}</td>
                <td>{{item.english}}</td>
                <td>{{item.english + item.math + item.chinese}}</td>
            </tr>
            <tr style="background-color: #999;">
                <td>平均分</td>
                <td>{{aver('math')}}</td>
                <td>{{aver('chinese')}}</td>
                <td>{{aver('english')}}</td>
                <td>{{aver('math')+aver('chinese')+aver('english')}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data:{
                titles:['姓名','数学','语文','英语','总成绩'],
                arr:[
                    { name:'赵云', math:97, chinese:89, english:67 },
                    { name:'关羽', math:67, chinese:52, english:96 },
                    { name:'张飞', math:72, chinese:87, english:89 },
                    { name:'马超', math:95, chinese:89, english:59 },
                    { name:'黄忠', math:49, chinese:83, english:99 },
                ]
            },
            computed:{
                aver(){
                    return function(subject){
                        let ret = this.arr.reduce((pre,cur)=>{
                            return pre + cur[subject] 
                            // 切记，这里是cur[subject]，不是cur.subject
                        },0)
                        return ret/this.arr.length
                    }
                }
                // 常规思维方法：
                // aver(){
                //     let ret = this.arr.reduce((pre,cur)=>{
                //        return pre + cur.math
                //     },0)
                //     return ret/this.arr.length
                // },
                // aver2(){
                //     let ret = this.arr.reduce((pre,cur)=>{
                //        return pre + cur.chinese
                //     },0)
                //     return ret/this.arr.length
                // },
                // aver3(){
                //     let ret = this.arr.reduce((pre,cur)=>{
                //        return pre + cur.english
                //     },0)
                //     return ret/this.arr.length
                // }
            }
        })
    </script>
</body>
</html>