Vue指令练习——根据学生的成绩显示成绩等级：优秀、良好、中、及格、不及格。

根据学生的成绩显示成绩等级：优秀、良好、中、及格、不及格。

<script setup lang='ts'>
const student = [
    {
        id: 20180123,
        name: '张三',
        grade: 47,
    },
    {
        id: 20180124,
        name: '李四',
        grade: 89,
    },
    {
        id: 20180125,
        name: '王五',
        grade: 92,
    }
]
</script>
<template>
    <div>
        <table border="1">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr v-for="item in student" :key="item.id">
                <th>{{ item.id }}</th>
                <th>{{ item.name }}</th>
                <th>{{ item.grade }}</th>
                <th>
                    <div v-if="item.grade >= 0 && item.grade < 60">不及格</div>
                    <div v-else-if="item.grade >= 60 && item.grade < 70">及格</div>
                    <div v-else-if="item.grade >= 70 && item.grade < 80">中</div>
                    <div v-else-if="item.grade >= 80 && item.grade < 90">良好</div>
                    <div v-else="item.grade >= 90 && item.grade <= 100">优秀</div>
                </th>
            </tr>
        </table>
    </div>
</template>

 运行结果如下：