<!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>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app" class="container">
<table class="table table-light table-bordered">
<tbody>
<tr>
<th>id</th>
<th>姓名</th>
<th>性别</th>
<th>成绩 </th>
<th>等级</th>
</tr>
<tr v-for="item in arr" :key="item.id" :style="{background:item.score>=90?'#7DB3FA':'transparent'}">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.score}}</td>
<td>
<span v-if="item.score>=90">优秀</span>
<span v-else-if="item.score>=80">良好</span>
<span v-else-if="item.score>=60">及格</span>
<span v-else>不及格</span>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
arr: [{
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>
