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可以通过n

Vue3 中实现学生成绩表通常会涉及组件化开发,以下是一个简化的步骤: 1. 定义组件结构:首先,创建一个名为 `StudentGradeTable` 的Vue组件。这个组件可以包括表格头(如姓名、科目、成绩),以及数据列表部分用于显示每个学生的成绩。 ```javascript <template> <div> <table> <thead> <tr> <th>学生姓名</th> <th>科目</th> <th>成绩</th> </tr> </thead> <tbody> <template v-for="student in students" :key="student.id"> <tr> <td>{{ student.name }}</td> <td>{{ student.subject }}</td> <td>{{ student.score }}</td> </tr> </template> </tbody> </table> </div> </template> <script> export default { name: 'StudentGradeTable', props: { students: { type: Array, required: true, }, }, }; </script> ``` 2. 使用 prop 接收数据:在父组件中,通过 `props` 将学生的成绩数据传给 `StudentGradeTable` 组件。 ```html <template> <StudentGradeTable :students="studentData" /> </template> <script> import StudentGradeTable from './components/StudentGradeTable.vue'; export default { components: { StudentGradeTable }, data() { return { studentData: [ // 这里填充一些示例学生数据 { id: 1, name: '张三', subject: '数学', score: 90 }, { id: 2, name: '李四', subject: '语文', score: 85 }, // ... ], }; }, }; </script> ``` 3. 数据管理:如果你的应用有状态管理需求,可以使用 Vuex 或者 Vue3 的响应式特性(如 Composition API 中的 `ref` 和 `watch`)来管理学生数据。 4. 动态性和交互:你可以添加排序、过滤等交互功能,使得用户可以根据需要查看和操作成绩表
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值