<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1px" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>
<span v-if="user.age>=30">中年</span>
<span v-else-if="user.age>=20">青年</span>
<span v-else>少年</span>
</td>
<td>
<span v-if="user.gender == 1">男</span>
<span v-else-if="user.gender == 2">女</span>
</td>
<td>
<span>{{user.score}}</span>
</td>
<td>
<span v-if="user.score>90">很优秀</span>
<span v-else-if="user.score>80">优秀</span>
<span style="color: red;" v-else>及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
users: [{
name: "刘少穷",
age: 20,
gender: 1,
score: 89
}, {
name: "刘美美",
age: 19,
gender: 2,
score: 67
}, {
name: "刘年年",
age: 13,
gender: 2,
score: 100
}, {
name: "刘瑜",
age: 35,
gender: 2,
score: 96
}]
}
})
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
