<!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>Vue-指令-案例</title>
<script src="js/vue.js"></script>
<style>
table{
border:1px solid black;
text-align: center;
margin: 0 auto;
}
th,td{
border: 1px solid black;
}
</style>
</head>
<!-- 通过Vue完成表格数据的渲染展示 -->
<body>
<div id="app">
<table cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr v-for="(user,index) in users"> <!-- 要想循环展示哪个标签，就在哪个标签处加v-for -->
<td>{{index + 1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td> <!-- {{}}:插值表达式，用来将所要展示数据模型中的内容展示在视图上 -->
<td>
<span v-if="user.gender==1">男</span> <!-- 如果值为1，则为男；值为2，则为女 使用v-if -->
<span v-if="user.gender==2">女</span>
</td>
<td>{{user.score}}</td>
<td>
<!-- 大于等于85：优秀 小于85大于等于60：及格 小于60：不及格 v-if，v-else-if，v-else-->
<span v-if="user.score>=85">优秀</span>
<span v-else-if="user.score>=60">及格</span>
<span style="color: red;" v-else>不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
users: [{
name: "Tom",
age: 20,
gender: 1,
score: 78
},{
name: "Rose",
age: 18,
gender: 2,
score: 86
},{
name: "Jerry",
age: 26,
gender: 1,
score: 90
},{
name: "Tony",
age: 30,
gender: 1,
score: 52
}]
},
methods: {
},
})
</script>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
