用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. Vue中实现聊天窗口overflow:auto自动滚动到底部，实现显示当前最新聊天消息

    在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的box用的是overflow:auto 注意:vue项目需要注意在dom结构渲染完再进行操作 <div class="mai ...

  2. js打乱数组排序

    用到的知识点:Math.random()//用于打乱数组索引 random() 方法可返回介于 0(包含) ~ 1(不包含) 之间的一个随机数. var arr=[1,2,3,4,5,6]; for( ...

  3. Unity各平台宏定义

    属性 方法 UNITY_EDITOR #define directive for calling Unity Editor scripts from your game code. UNITY_EDI ...

  4. poj 1741 Tree (树的分治）

    Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 30928   Accepted: 10351 Descriptio ...

  5. 理解django的框架为何能够火起来

    理解django的框架为何能够火起来 https://www.yiibai.com/django/django_basics.html https://code.ziqiangxuetang.com/ ...

  6. SpringBoot2基础，进阶，数据库，中间件等系列文章目录分类

    本文源码:GitHub·点这里 || GitEE·点这里 一.文章分类 1.入门基础 SpringBoot2:环境搭建和RestFul风格接口 2.日志管理 SpringBoot2:配置Log4j2, ...

  7. 简单实现vue列表点击某个高亮显示

    比如ul下有4个li元素. 给每个li绑定点击事件@click="select_li(index),然后这个点击时间会将一个全局变量 selectLi 赋值为 index 的值. 然后在每个 ...

  8. kvm磁盘管理

    kvm磁盘管理 kvm虚拟机虚拟磁盘格式转换 各种格式说明介绍 row:裸格式,占用空间较大,不支持快照功能,性能较好,不方便传输(顺序读写) 50G 2G 传输50G qcow2:cow 占用空间小 ...

  9. linux部署.net Core项目

    首篇笔记,多多关照.方便回忆和给新手指导,大神绕道 首先在Linux系统部署.net Core项目首先准备一个Linux系统的服务器,百度云,阿里云都行. 1.net core 部署在Linux系统上 ...

  10. 监听属性watch

    immediate.deep data() { return { firstName: "刘", lastName: "XX", fullName: " ...