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,name,实现,sex,item,score,90,id 来源： https://blog.csdn.net/qq_48294048/article/details/120799231