用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. 【系列专题】JavaScript 重温系列（22篇全）

    JavaScript 初级篇 [JS]120-重温基础:语法和数据类型 [JS]121-重温基础:流程控制和错误处理 [JS]122-重温基础:循环和迭代 [JS]123-重温基础:函数 [JS]12 ...

  2. 修改IE默认页的指向

    方法一: 1.打开IE浏览器 → 单击 工具 → Internet选项 2.填上你要设置的主页网址 3.重启IE浏览器,成功设置主页 方法二: 1.按住键盘"win+r" → 输入 ...

  3. 【Java SE】使用Javacv截取视频图片

    [Java Web开发学习]使用Javacv截取视频图片 转载:https://www.cnblogs.com/yangchongxing/p/9482935.html github地址:https: ...

  4. Cisco学习记录（一）：Cisco Packet Tracer官网下载方法

    通过Cisco Packet Tracer学习计算机网络知识 本人大三狗一枚,一直以来都在学java, python, web开发的我,经过一番决定,毅然决然要开始深入学习计算机网络!通过Cisco ...

  5. mysql数据库密码的修改与恢复

    一.mysql密码的修改与恢复 1.修改密码 mysqladmin -u root -p123 password 456 数据库内修改 method.first: update mysql.user ...

  6. 中文分词接口api，采用结巴分词PHP版中文分词接口

    中文分词,分词就是将连续的字序列按照一定的规范重新组合成词序列的过程.我们知道,在英文的行文中,单词之间是以空格作为自然分界符的,而中文只是字.句和段能通过明显的分界符来简单划界,唯独词没有一个形式上 ...

  7. mysql统计天、周、月、季度、半年、年

    之前在网上搜索按时间统计,发现不是很全 ,接着别人的思路进行延伸下, mysql统计天.周.月.季度.半年.年 前期工作创建辅助表 CREATE TABLE num (i INT); ),(),(), ...

  8. Python 分支、循环、条件与枚举

    单行注释:# 注释内容多行注释:''' 注释内容 '''   Python 中有三种控制流语句: if for while 注:Python 中没有 Switch 这种开关语句 if 语句检测条件真, ...

  9. 百度大脑UNIT3.0详解之嵌入式对话理解技术

    相信很多人都体验过手机没有网时的焦虑,没有网什么也做不了.而机器人也会遇到这样的时刻,没有网或者网络环境不好的情况下,无法识别用户在说什么,也无法回复用户.在AIoT(AI+物联网)飞速普及的现在,智 ...

  10. Centos7 死活上不了网

    NAT模式,手动修改ifcfg 如下: # vi /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE=EthernetPROXY_METHOD=noneBR ...