'''

有以下成绩单数据

scores = [

	{ name: 'Bob', math: 97, chinese: 89, english: 67 },

	{ name: 'Tom', math: 67, chinese: 52, english: 98 },

	{ name: 'Jerry', math: 72, chinese: 87, english: 89 },

	{ name: 'Ben', math: 92, chinese: 87, english: 59 },

	{ name: 'Chan', math: 47, chinese: 85, english: 92 },

]

用table表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；

'''


<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="d1">

        <table>

            <div>

                <thead>

                    <tr>

                        <th>No.</th>

                        <th>name</th>

                        <th>math</th>

                        <th>chinese</th>

                        <th>english</th>

                        <th>sumScore</th>

                    </tr>

                </thead>

                <tbody>

                    <tr v-for="d in score">

                        <td></td>

                        <td>{{ d.name }}</td>

                        <td>{{ d.math }}</td>

                        <td>{{ d.chinese }}</td>

                        <td>{{ d.english }}</td>

                        <td>{{ d.ttlScore }}</td>

                    </tr>

                </tbody>

            </div>

        </table>

    </div>

</body>

<script src="js/vue.js"></script>

<script>

    new Vue({

        el: '#d1',

        data: {

            scores:[

                { name:'Bob',math:'97',chinese:'89',english:'67'},

                { name:'Tom',math:'67',chinese:'52',english:'98'},

                { name:'Jerry',math:'72',chinese:'87',english:'89'},

                { name:'Chan',math:'47',chinese:'85',english:'92'}

            ]

        },

        filter: {

            sumScore(s1,s2,s3) {

                return s1 + s2 + s3

            }

        },

        computed: {

            score() {

                let scoreArr = this.scores;

                for (let i = 0; i < scoreArr.length - 1; i++) {

                    for (let j = 0; j < scoreArr - 1 - i; j++) {

                        let currentScore = scoreArr[j].math + scoreArr[j].chinese + scoreArr[j].english;

                        let nextScore = scoreArr[j + 1].math + scoreArr[j + 1].chinese + scoreArr[j + 1].english;

                        scoreArr[j].ttlScore = currentScore;

                        scoreArr[j + 1].ttlScore = nextScore;

                        if (currentScore < nextScore) {

                            let temp = scoreArr[j];

                            scoreArr[j] = scoreArr[j + 1];

                            scoreArr[j + 1] = temp;

                        }

                    }

                }

                console.log(scoreArr);

                return scoreArr

            }

        }

    });

</script>

</html>

day 68 作业的更多相关文章

  1. C 语言学习 第12次作业总结

    作业总结 本次课堂的内容为字符串相关的几个函数还有结构体. 字符串相关函数 在此之前的课程中,输入主要都是使用scanf这个函数.而在这节课上,冯老师讲解了字符串获取函数gets.在不需要控制符的情况 ...

  2. 2016福州大学软件工程Beta阶段团队作业成绩汇总

    1.评分规则 本次Beta阶段团队作业评分方法如下: 团队得分=[[7次scrum过程评分+(小组互评得分+教师评分)/2]/2],其中过程.小组.教师各30分 说明:由于没有规定提交团队贡献比,因此 ...

  3. 耿丹CS16-2班课堂测试作业汇总

    Deadline: 2016-11-01 11:59 作业内容 课堂测试作业总结 00.题目得5分,多半扣在格式上,有些同学代码写得很过分,已经很仁慈对待,同学们珍惜之: 01.界面设计得分不好,换行 ...

  4. SQL SERVER 中如何用脚本管理作业

    在SQL SERVER中用脚本管理作业,在绝大部分场景下,脚本都比UI界面管理作业要高效.简洁.打个简单的比方,如果你要查看作业的运行时长,如果用UI界面查看,100个作业,你就得在历史记录里面至少查 ...

  5. Spark&Hive：如何使用scala开发spark访问hive作业，如何使用yarn resourcemanager。

    背景: 接到任务,需要在一个一天数据量在460亿条记录的hive表中,筛选出某些host为特定的值时才解析该条记录的http_content中的经纬度: 解析规则譬如: 需要解析host: api.m ...

  6. 软件工程(QLGY2015)第三次作业点评（含成绩）

    相关博文目录: 第一次作业点评 第二次作业点评 第三次作业点评 团队信息 本页点评团队1-22,其他组见:http://www.cnblogs.com/xiaozhi_5638/p/4490764.h ...

  7. 作业成绩 final-review 20161201-1203 15:05

    final-review阶段,20161201-20161203 15:05 final 评论II截止 20161204 09:00 申诉截止时间 20161207 12:00,微信联系杨贵福. 凡描 ...

  8. 作业成绩 final 20161124-1201 09:00

    final阶段,20161124-1201 09:00. 申诉截止时间 20161206 12:00,微信联系杨贵福. 凡描述需求或BUG时,应给出以下4项: 你期待看到的现象如何 你实际看到的现象 ...

  9. Spark源码系列（三）作业运行过程

    作业执行 上一章讲了RDD的转换,但是没讲作业的运行,它和Driver Program的关系是啥,和RDD的关系是啥? 官方给的例子里面,一执行collect方法就能出结果,那我们就从collect开 ...

随机推荐

  1. idea 配置 scala

    在setting 中,通过plugin 安装 Scala 然后重启idea 重启后,建一个scala文件,根据上面提示安装scala

  2. zz深度学习论文合集大全

        Pull requestsIssues Marketplace Explore             Learn Git and GitHub without any code! Using ...

  3. USACO Score Inflation

    洛谷 P2722 总分 Score Inflation https://www.luogu.org/problem/P2722 JDOJ 1697: Score Inflation https://n ...

  4. 公共组件及脚手架webpack模板

    一.公共组件的创建和使用 前面已经学习vue组件时,了解了公共组件,但在脚手架项目中只使用过局部组件.这里是讲解全局组件如何在脚手架项目中去使用. 1.创建全局组件 在src/components/C ...

  5. [LeetCode] 767. Reorganize String 重构字符串

    Given a string S, check if the letters can be rearranged so that two characters that are adjacent to ...

  6. [LeetCode] 190. Reverse Bits 颠倒二进制位

    Reverse bits of a given 32 bits unsigned integer. Example 1: Input: 00000010100101000001111010011100 ...

  7. [LeetCode] 99. Recover Binary Search Tree 复原二叉搜索树

    Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...

  8. win10 连接samba 账号密码不正确，win7可以访问

    1.本地安全策略,本地策略-安全选项,需要修改成默认的值的修改方式: 查找注册表浏览到 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\LSA ...

  9. 2019年上-C语言程序设计-第1次blog作业

    准备工作(20分) 1.在博客园申请个人博客,以真实姓名和学号加入班级博客(链接地址) 2.关注邹欣老师博客(并寻找答案:邹欣老师是谁?是做什么的?).关注任课老师博客 3.注册登录中国大学MOOC网 ...

  10. Kubernetes 学习（十）Kubernetes 容器持久化存储

    0. 前言 最近在学习张磊老师的 深入剖析Kubernetes 系列课程,最近学到了 Kubernetes 容器持久化存储部分 现对这一部分的相关学习和体会做一下整理,内容参考 深入剖析Kuberne ...