用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. 【JS】324- JS中的内存管理（中高级前端必备）

    前言 像C语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()和free()用于分配内存和释放内存.而对于JavaScript来说,会在创建变量(对象,字符串等)时分配内存,并且在不再 ...

  2. Spring自动装配----注解装配----Spring自带的@Autowired注解

    Spring自动装配----注解装配----Spring自带的@Autowired注解 父类 package cn.ychx; public interface Person { public voi ...

  3. 【朝花夕拾】Android多线程之（三）runOnUiThread篇——程序猿们的贴心小棉袄

    runOnUiThread()的使用以及原理实在是太简单了,简单到笔者开始都懒得单独开一篇文章来写它.当然这里说的简单,是针对对Handler比较熟悉的童鞋而言的.不过麻雀虽小,五脏俱全,runOnU ...

  4. java8新特性- 默认方法 在接口中有具体的实现

    案例分析 在java8中在对list循环的时候,我们可以使用forEach这个方法对list进行遍历,具体代码如下demo所示 public static void main(String[] arg ...

  5. poj 1511 Invitation Cards （最短路）

    Invitation Cards Time Limit: 8000MS   Memory Limit: 262144K Total Submissions: 33435   Accepted: 111 ...

  6. Caffe源码-SyncedMemory类

    SyncedMemory类简介 最近在阅读caffe源码,代码来自BVLC/caffe,基本是参照网络上比较推荐的 Blob-->Layer-->Net-->Solver 的顺序来分 ...

  7. 记MAC地址、磁盘序列号的获取

    import java.io.*; import java.net.Inet4Address; import java.net.InetAddress; import java.net.Network ...

  8. [ASP.NET Core 3框架揭秘] 跨平台开发体验: Windows [下篇]

    由于ASP.NET Core框架在本质上就是由服务器和中间件构建的消息处理管道,所以在它上面构建的应用开发框架都是建立在某种类型的中间件上,整个ASP.NET Core MVC开发框架就是建立在用来实 ...

  9. vscode 同步扩展插件

    第一步: 在 VSCode 中,安装用于同步配置的插件 settings sync     第二步:将 VSCode 配置上传到 GitHub 完成这一步需要 GitHub token 和 GitHu ...

  10. vue.config.js的常用配置

    const path = require('path') const glob = require('glob') const resolve = (dir) => path.join(__di ...