Vue12.17作业

"""
1、先有一下成绩单数据
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 },
]
用table表格标签渲染以上数据,表格第一列是学生总分排名,最后一列是学生总分;

2、还是采用上方相同的数据,采用相同的渲染规则,只渲染所有科目都及格了的学生。
"""

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <table border="1" width="400" rules="all" style="margin: auto">
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
            <tr v-for="(stu,i) in scores">
                <td>{{ i + 1 }}</td>
                <td v-for="v in stu">{{ v }}</td>
            </tr>
        </table>
    </div>
</body>
<script src="js/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},
    ];

    let total_scores = [];
    for (stu of scores) {
        stu.total = stu.math + stu.chinese + stu.english;
        total_scores.push(stu);
    }

    // scores = [
    //     {name: 'Bob', math: 97, chinese: 89, english: 67, total:total},
    //     {name: 'Tom', math: 67, chinese: 52, english: 98, total:total},
    //     {name: 'Jerry', math: 72, chinese: 87, english: 89, total:total},
    //     {name: 'Ben', math: 92, chinese: 87, english: 59, total:total},
    //     {name: 'Chan', math: 47, chinese: 85, english: 92,total:total},
    // ]

    for(let i = 0; i < total_scores.length - 1; i++) {
        for(let j = 0;  j < total_scores.length - 1 - i; j++) {
            if (total_scores[j].total < total_scores[j+1].total) {
                let t = total_scores[j];
                total_scores[j] = total_scores[j+1];
                total_scores[j+1] = t;
            }
        }
    }

    new Vue({
        el: '#app',
        data: {
            scores: total_scores,
        }
    });
</script>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <table border="1" width="400" rules="all" style="margin: auto">
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
            <tr v-for="(stu,i) in scores" v-if="stu.math>=60 && stu.chinese>=60 && stu.english>=60">
                <td>{{ i + 1 }}</td>
                <td v-for="v in stu">{{ v }}</td>
            </tr>
        </table>
    </div>
</body>
<script src="js/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},
    ];

    let total_scores = [];
    for (stu of scores) {
        stu.total = stu.math + stu.chinese + stu.english;
        total_scores.push(stu);
    }

    // scores = [
    //     {name: 'Bob', math: 97, chinese: 89, english: 67, total:total},
    //     {name: 'Tom', math: 67, chinese: 52, english: 98, total:total},
    //     {name: 'Jerry', math: 72, chinese: 87, english: 89, total:total},
    //     {name: 'Ben', math: 92, chinese: 87, english: 59, total:total},
    //     {name: 'Chan', math: 47, chinese: 85, english: 92,total:total},
    // ]

    for(let i = 0; i < total_scores.length - 1; i++) {
        for(let j = 0;  j < total_scores.length - 1 - i; j++) {
            if (total_scores[j].total < total_scores[j+1].total) {
                let t = total_scores[j];
                total_scores[j] = total_scores[j+1];
                total_scores[j+1] = t;
            }
        }
    }

    new Vue({
        el: '#app',
        data: {
            scores: total_scores,
        }
    });
</script>
</html>
posted @ 2019-12-17 19:39  mqb11  阅读(174)  评论(0编辑  收藏  举报