成绩表"/>
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>效果：
更多推荐
vue实现成绩表
发布评论