使用 table 表格的方式渲染出学生成绩信息

最新推荐文章于 2024-08-26 21:45:00 发布

颗粒864

最新推荐文章于 2024-08-26 21:45:00 发布

阅读量603

点赞数 3

分类专栏： vue 文章标签： html vue.js 前端

本文链接：https://blog.csdn.net/weixin_72275251/article/details/126880346

版权

Vue 表格成绩评定动态显示高亮背景

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

要求如下：

其中成绩>=90，显示“优秀"；80<= 成绩<90，显示“良好"，60<=成绩<80，显示及格；成绩<60，显示“不及格"。成绩大于等于 90 分的学员，背景使用“#7DB3FA"高亮显示。

效果图：

样式代码如下：

<style>
        #app {
            text-align: center;
            border-color: rgb(214, 207, 207);
        }
        
        .youxiu {
            background-color: #7DB3FA;
        }
    </style>

其次

<body>
    <!-- 一、使用 table 表格的方式渲染出如下学生成绩信息，其中成绩>=90，显示“优秀"；80<=
成绩<90，显示“良好"，60<=成绩<80，显示及格；成绩<60，显示“不及格"。成绩大于等于
90 分的学员，背景使用“#7DB3FA"高亮显示。
[
{id: 1,name: '诸葛亮',sex: '男',score: 98},
{id: 2,name: '周瑜',sex: '男',score: 88},
{id: 3,name: '刘阿斗',sex: '男',score: 50},
{id: 4,name: '曹植',sex: '男',score: 90},
{id: 5,name: '张飞',sex: '男',score: 70},
{id: 6,name: '曹丕',sex: '男',score: 55}
] -->
    <table border="1" cellspacing="0" width="600px" height="300" id="app">
        <tr :style="{background:'#ccc'}">
            <td>id</td>
            <td>姓名</td>
            <td>性别</td>
            <td>成绩</td>
            <td>等级</td>
        </tr>
        <tr v-for="(item, index) in arr" :class="{'youxiu':item.score>=90}">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.score}}</td>
            <td v-if="item.score>=90">优秀</td>
            <td v-else-if="item.score>=80">良好</td>
            <td v-else-if="item.score>=60">及格</td>
            <td v-else>不及格</td>

        </tr>
    </table>
    <script>
        new Vue({
            el: '#app',
            data: {
                arr: [{
                    id: 1,
                    name: '诸葛亮',
                    sex: '男',
                    score: 98
                }, {
                    id: 2,
                    name: '周瑜',
                    sex: '男',
                    score: 88
                }, {
                    id: 3,
                    name: '刘阿斗',
                    sex: '男',
                    score: 50
                }, {
                    id: 4,
                    name: '曹植',
                    sex: '男',
                    score: 90
                }, {
                    id: 5,
                    name: '张飞',
                    sex: '男',
                    score: 70
                }, {
                    id: 6,
                    name: '曹丕',
                    sex: '男',
                    score: 55
                }]
            },
        });
    </script>
</body>