'''

有以下成绩单数据

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. JDOJ 1790: 高精度A-B

    JDOJ 1790: 高精度A-B JDOJ传送门 洛谷 P2142 高精度减法 洛谷传送门 题目描述 高精度减法 输入格式 两个整数a,b(第二个可能比第一个大) 输出格式 结果(是负数要输出负号) ...

  2. LG5357 「模板」AC自动机（二次加强版） AC自动机+fail树

    问题描述 LG5357 题解 不是fail树的AC自动机复杂度是假的. 把AC自动机搞出来,建立Trie树,树上爆搜一遍就好了. \(\mathrm{Code}\) #include<bits/ ...

  3. Python搭建HTTP服务

    我们平时可能会需要HTTP服务,本机搭建一个服务器来完成有些过于繁琐,这时就可以用python帮我们搭建一个HTTP服务器,省时高效. python 2.x 输入命令:python -m Simple ...

  4. Windows10 WSL下 龙芯3A 交叉编译环境搭建

    记个流水账避免事后忘记怎么搭建的 - - 环境 Key Value 系统 Windows10 WSL系统 Ubuntu 下载工具链 http://www.loongnix.org/index.php/ ...

  5. Python 爬取 13 个旅游城市，告诉你五一大家最爱去哪玩？

    五一假期已经结束,小伙伴是不是都还没有玩过瘾?但是没办法,还有很多bug等着我们去写,同样还有需要money需要我们去赚.为了生活总的拼搏. 今年五一放了四天假,很多人不再只是选择周边游,因为时间充裕 ...

  6. swagger案例Swagger案例

    pom <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework ...

  7. Tomcat启用HTTPS协议配置过程

    Article1较为简洁,Article2较为详细,测试可行. Article1 概念简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问 ...

  8. SpringBoot集成Spring Security（7）——认证流程

    文章目录 一.认证流程 二.多个请求共享认证信息 三.获取用户认证信息 在前面的六章中,介绍了 Spring Security 的基础使用,在继续深入向下的学习前,有必要理解清楚 Spring Sec ...

  9. aicoder实习svn内部培训教程

    1 svn介绍 都已经用了git,为什么还要介绍svn呢?为了让aicoder.com的学员能够掌握多种的源代码管理工具的使用方法,更快的融入到项目开发中,特整理此文档. 1.1 项目管理中的版本控制 ...

  10. Gitlab CI/CD

    Gitlab CI/CD 前言 纵观人类历史的发展以及三次工业革命,你会发现利用机器来替代部分人力劳动,将重复的工作自动化从而解放生产力都是发展的必然趋势,在软件工程领域也不例外,其中 CI/CD 就 ...