用table标签渲染下面的数据, 最后一列为总分, 第一列为排名

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},

    ]


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="d1">

    <table border="1px" style="margin: auto">

        <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, i) in scores">

            <td>{{ i+1 }}</td>

            <td v-for="v in d">{{ v }}</td>

        </tr>

        </tbody>

    </table>

</div>

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

<script>

    let 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},

    ];

    // 计算出总分并添加到对象中

    for (score of scores) {

        score.total = score.math + score.chinese + score.english

    }

    // 按照总分排序

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

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

            if (scores[j].total < scores[j+1].total) {

                let temp = scores[j];

                scores[j] = scores[j + 1];

                scores[j + 1] = temp;

            }

        }

    }

    new Vue({

        el: '#d1',

        data: {

            scores

        },

    });

</script>

</body>

</html>

Vue小练习 02的更多相关文章

  1. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  2. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  3. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  4. Vue小项目二手书商城：（四）详情页和购物车（emit、prop、computed）

    实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...

  5. Vue小项目二手书商城：（三）前端渲染数据

    实现内容: axios取到的数据在前端使用(父子组件各自应该怎么使用) 一.简单使用(在哪取在哪用) 1.在App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop ...

  6. Vue小项目二手书商城：（二）axios前后端数据交互

    实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...

  7. Vue小项目二手书商城：（一）准备工作、组件和路由

    本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...

  8. VUE小练习(按钮颜色，数组映射)

    VUE小练习(按钮颜色,数组映射) ## 1.有红.黄.蓝三个按钮,以及一个200x200矩形框box, 点击不同的按钮,box的颜色会被切换成指定的颜色 ''' 解法一:我本来的思路,把三个按钮绑定 ...

  9. vue小故事之父子(上下级)通信之父传子props

    vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props  或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

随机推荐

  1. 016_List/Set/Map

    先写一下3这种遍历方法 for循环 List<Teacher> list = new ArrayList<>(); list.add(new Teacher("张三& ...

  2. 代码检查又一利器：ArchUnit

    Code Review总是让人又爱又恨,它可以帮助我们在提测之前发现很多代码中比较"丢人"的问题,但是,Code Review通常会比写代码更加耗费精力,因为你需要理解别人的代码, ...

  3. SecureCRT安装包和破解脚本

    第一步下载 SecureCRT安装包和破解脚本 下载 http://pan.baidu.com/s/1c1D5Ala 破解脚本 securecrt_mac_crack.pl安装包scrt-7.3.7- ...

  4. JavaScript构造函数学习笔记分享

    构造函数就是一个普通的函数,创建方式和普通函数没有区别 不同的是构造函数名习惯上首字母大写 普通函数是直接调用,而构造函数需要使用new关键字来调用 构造函数的执行流程: 立刻创建一个新的对象 将新建 ...

  5. 3年java开发面试BAT，你必须彻底搞定Maven！

    前言 现在的Java项目中,Maven随处可见. Maven的仓库管理.依赖管理.继承和聚合等特性为项目的构建提供了一整套完善的解决方案,如果你搞不懂Maven,那么一个多模块的项目足以让你头疼,依赖 ...

  6. Linux Bash之正则表达式

    首先注意:正则表达式与通配符是完全不同的概念.通配符(wildcard)代表的是 Bash 操作接口的一个功能,而正则表达式是一种字符串处理的表示方式,一定要区分开来. 正则表达式(Regular E ...

  7. 记录一次创建.net core 项目 并且发布到docekr【完全新手入门】

    1]环境说明 操作系统:Window 10 专业版 开发工具 Vs2019专业版 Docker:  Docker for Windows  2]创建.net core项目并且发布 2.0先打开并且运行 ...

  8. c++-多态的学习

    多态的基本介绍 多态基础 面向对象新求 C++编译器提供的多态解决方案 多态意义.多态成立的是三个条件 多态理论基础 多态面试题强化 多态的理解 C++编译器如何实现多态 重载重写重定义 虚析构函数 ...

  9. HA: ISRO Vulnhub Walkthrough

    下载地址: https://www.vulnhub.com/entry/ha-isro,376/ 主机扫描: ╰─ nmap -p- -sV -oA scan 10.10.202.131Startin ...

  10. Android判断com.android.camera.action.CROP是否存在

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/225 最近线上报错,有个用户连续crash了10次左右,查 ...