文件列表
HTML部分
<!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>
<link rel="stylesheet" href="css/style.css">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="g in groups" :key="g.groupId">
<div class="title" @click="toggle(g.groupId)">
<img :src="g.expand?'img/down.png':'img/right.png'" alt="" class="arrow">
<span>{{g.groupName}} {{g.onlineMembers}}/{{g.members.length}}</span>
</div>
<ul v-if="g.expand">
<li v-for="m,i in g.members" :key="i">
<img :src="m.logo" alt="" class="logo">
<span>{{m.name}}</span>
</li>
</ul>
</li>
</ol>
</div>
<script>
var vm = new Vue({
data: {
groups: [
{
groupId: 1, // 组id
groupName: "小学同学", // 组名
onlineMembers: 1, // 在线人数
expand: false, // 是否展开
members: [ // 本组好友成员
{ name: "张三1", logo: "img/logo.png" },
{ name: "张三2", logo: "img/logo.png" },
{ name: "张三3", logo: "img/logo.png" },
{ name: "张三4", logo: "img/logo.png" }
]
},
{
groupId: 2,
groupName: "高中同学",
onlineMembers: 2,
expand: false,
members: [
{ name: "李四1", logo: "img/logo.png" },
{ name: "李四2", logo: "img/logo.png" },
{ name: "李四3", logo: "img/logo.png" },
{ name: "李四4", logo: "img/logo.png" }
]
},
{
groupId: 3,
groupName: "大学同学",
onlineMembers: 3,
expand: false,
members: [
{ name: "王五1", logo: "img/logo.png" },
{ name: "王五2", logo: "img/logo.png" },
{ name: "王五3", logo: "img/logo.png" },
{ name: "王五4", logo: "img/logo.png" }
]
}
]
},
methods: {
toggle(groupId){
var group = this.groups.filter(g=>g.groupId==groupId)[0];
group.expand = !group.expand;
}
}
})
vm.$mount("#app")
</script>
</body>
</html>
CSS部分
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
user-select: none;
}
ol,
ul {
list-style: none;
}
ol {
border: 1px solid #ccc;
border-radius: 3px;
width: 200px;
margin: 10px auto;
}
ol>li, ul>li{
line-height: 30px;
cursor: pointer;
}
ul>li{
padding: 0 10px;
}
.arrow {
width: 25px;
vertical-align: middle;
}
.logo{
width: 20px;
height: 20px;
border-radius: 50%;
vertical-align: middle;
}
效果如下