<!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="./vue.js"></script>
<script src="./vue-router.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.title {
height: 60px;
background-color: yellow;
text-align: center;
line-height: 60px;
}
.friend-header {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
font-size: 20px;
font-weight: bold;
outline: none;
cursor: pointer;
}
.user-list {
overflow: hidden;
}
.user-list > div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
border-bottom: 1px solid blue;
height: 100px;
}
.user-list > div:last-child {
border-bottom: none;
}
.toggle-enter,
.toggle-leave-to {
/* 计算属性 groupHeightSytle 在设置标签高度，这两个类名也在设置标签高度，而计算属性设置的样式属于行内样式，相当于js在设置。 */
height: 0 !important;
}
.toggle-enter-active,
.toggle-leave-active {
transition: all 0.5s;
}
.header-arrow {
display: inline-block;
transition: all 0.5s;
}
</style>
</head>
<body>
<div id="app">
<h1 class="title">好友列表</h1>
<friend-group
v-for="group,i in friends "
:key="group.id"
:group="group"
></friend-group>
</div>
<template id="tem">
<div class="friend-root">
<!-- 可点击的头部部分 -->
<button class="friend-header" @click="show=!show">
<div class="header-left">
<span class="header-arrow" :style="arrowStyle">></span>
<span>{{group.name}}</span>
</div>
<div class="herader-right">
{{group.list.filter(friend=>friend.online==true).length}}/{{group.list.length}}
</div>
</button>
<!-- 好友列表部分 -->
<transition name="toggle">
<div class="user-list" v-show="show" :style="groupHeightStyle">
<div
class="friend"
v-for="friend,i in group.list "
:key="friend.id"
:style="{'background-color':friend.online?'red':'linghtblue', 'clolr':friend.online?'white':'gray'}"
>
<div>
<h3>{{friend.name}}</h3>
<p>{{friend.sign}}</p>
</div>
<div>{{friend.online?"在线":"离线"}}</div>
</div>
</div>
</transition>
</div>
</template>
<script>
let friendGroup = {
template: "#tem",
data() {
return {
show: false,
};
},
props: ["group"],
computed: {
groupHeightStyle() {
return {
height: this.group.list.length * 100 + "px",
};
},
arrowStyle() {
return {
transform: this.show ? "rotate(90deg)" : "rotate(0deg)",
};
},
},
mounted() {
// 当前组件被渲染完毕时,要对数据进行排序
// sort() 函数 泛会所1 ，链各个数据需要换位置,返回值是-1,不需要更换位置,两个数据相等,返回0，也是不交换位置
this.group.list.sort((a, b) => {
if (a.online && !b.online) {
return -1;
} else if (!a.online && b.online) {
return 1;
} else {
return 0;
}
});
},
};
let vw = new Vue({
el: "#app",
data: {
friends: [
{
id: 1,
name: "同学",
list: [
{ id: 101, name: "小明", sign: "我是一个学生", online: false },
{ id: 102, name: "小李", sign: "我是一个学生", online: true },
{ id: 103, name: "小红", sign: "我是一个学生", online: false },
],
},
{
id: 2,
name: "朋友",
list: [
{ id: 201, name: "张三", sign: "我是一个学生", online: false },
{ id: 202, name: "李六", sign: "我是一个学生", online: true },
{ id: 203, name: "李四", sign: "我是一个学生", online: false },
{ id: 204, name: "王五", sign: "我是一个学生", online: true },
],
},
{
id: 3,
name: "家人",
list: [
{ id: 301, name: "张三1", sign: "我是一个学生", online: false },
{ id: 302, name: "李六1", sign: "我是一个学生", online: true },
{ id: 303, name: "李四1", sign: "我是一个学生", online: false },
{ id: 304, name: "王五1", sign: "我是一个学生", online: true },
{ id: 305, name: "王五1", sign: "我是一个学生", online: true },
],
},
],
},
components: {
friendGroup,
},
});
</script>
</body>
</html>
效果如下：
