zoukankan      html  css  js  c++  java
  • Vue小练习 02

    用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>
    
  • 相关阅读:
    【提高组】
    【学习】数论
    【2019.10.2】NOIP2018 模拟赛
    【普及组BOSS】
    ELK搭建elasticsearch常见报错
    Linux 下 安装Python第三方模块工具箱pip,以及用pip安装的方法
    Centos 基本命令不能用恢复方法
    Docker0 网卡删除
    Tomcat 设置开机自启
    Python 终端输出字体颜色
  • 原文地址:https://www.cnblogs.com/bigb/p/12057818.html
Copyright © 2011-2022 走看看