vue实现成绩表

需求：

使用 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}
]

参考效果：

代码：

注意：代码所需vue可以通过npm i vue --save下载，然后引入即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-商品列表</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style>
        table {
            margin: auto;
            border-collapse: collapse;
            border: 1px solid #ccc;
        }

        table td,
        th {
            border: 1px solid #ccc;
            width: 100px;
            height: 30px;
            text-align: center;
        }

        .active {
            background: #7DB3FA;
        }
    </style>
</head>

<body>
    <table id="app">
        <tr :style="{background:'#ccc'}">
            <th>id</th>
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
            <th>等级</th>
        </tr>
        <tr v-for="(item,index) in scoreMessage" :class="{'active':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: {
                scoreMessage: [{
                        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
                    }
                ]

            },
            methods: {}
        })
    </script>
</body>

</html>

效果：

猜你喜欢