-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
48 lines (46 loc) · 2.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<!-- <script src="js/vendor/modernizr-2.8.3.min.js"></script> -->
</head>
<body>
<header></header>
<div class="title">
<img src="img/title.png" alt="">
</div>
<div id="sheetTitle" class="sheet-title">
<p class="list-rank">排名</p>
<p class="list-name">船长</p>
<p class="list-number">船员数</p>
</div>
<div id="list-container">
<ul id="user-list">
<!--v-bind 绑定元素的属性 支持对象语法，表达式，数组语法-->
<!--v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。-->
<!--在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。-->
<li v-bind:class="(index % 2 == 0) ? even : odd" v-for="(info,index) in ranking">
<!--只有前3名展示奖牌图片，并且展示金，银，铜 三种不同的图片-->
<img v-bind:src="medals(index)" v-show="index < 3 ? true : false" alt="" class="medal">
<!-- 名次 -->
<p class="number">{{ index + 1 }}</p>
<!-- 绑定头像-->
<img v-bind:src="info.head" alt="" class="headshot">
<!-- 2种纯文本数据绑定方法 {{}} | v-text 船长名称-->
<p class="name" v-text="info.captain"></p>
<!-- 过滤器练习：格式化人数 -->
<p class="member-number">{{ info.teamNum | numFormat }}</p>
</li>
</ul>
</div>
</div>
<script src="js/vendor/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/vendor/jquery-3.1.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>