'''

有以下成绩单数据

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. Gson：

  2. VIJOS-P1234 口袋的天空

    洛谷 P1195 口袋的天空 https://www.luogu.org/problemnew/show/P1195 JDOJ 1374: VIJOS-P1234 口袋的天空 https://neoo ...

  3. Linux性能优化实战学习笔记：第三十八讲

    一.上节回顾 上一节,我们学习了 DNS 性能问题的分析和优化方法.简单回顾一下,DNS 可以提供域名和 IP 地址的映射关系,也是一种常用的全局负载均衡(GSLB)实现方法. 通常,需要暴露到公网的 ...

  4. C实现简单的xml格式文件

    今天在工作中遇到了一个需要处理xml格式的字符串,需求是修改某个固定的value值,并且还要把这个xml的key和value按照原本的格式在推送回去. 如果使用库,就显得太臃肿了,就想写个简单的dem ...

  5. GreenPlum 大数据平台--集群恢复

    一,问题描述 :::: gpinitstandby:greenplum01:gpadmin-[ERROR]:-Cannot use -n option when standby master has ...

  6. Netty FixedChannelPool

    如今越来越多的应用采用Netty作为服务端高性能异步通讯框架,对于客户端而言,大部分需求只需和服务端建立一条链接收发消息.但如果客户端需要和服务端建立多条链接的例子就比较少了. 最简单的实现就是一个f ...

  7. 第20课 unique_ptr独占型智能指针

    一. unique_ptr的基本用法 (一)初始化方式 1. 直接初始化:unique<T> myPtr(new T);  //ok.但不能通过隐式转换来构造,如unique<T&g ...

  8. CentOS7 Hbase 安装（完全分布式）

    安装前准备 hadoop安装 zookeeper安装 安装步骤 1.下载 $ wget http://mirror.bit.edu.cn/apache/hbase/2.0.5/hbase-2.0.5- ...

  9. vertica 设置最大会话数

    默认会话数最大值55,如果超过了,就会报如下错误: com.vertica.support.exceptions.NonTransientConnectionException: [Vertica][ ...

  10. [转载]DevExpress GridControl 使用方法技巧 总结 收录整理

    最近开始用DevExpress组件,发现很好的经验总结博客,在这里转载分享 原作者:https://www.cnblogs.com/wordgao/p/4517011.html 一.如何解决单击记录整 ...