vue实现好友列表
实现好友列表的基本结构
使用Vue.js实现好友列表需要结合组件化开发思想。创建一个FriendList.vue组件作为容器，内部嵌套FriendItem.vue子组件展示单个好友信息。
模板部分示例：
<template>
<div class="friend-list">
<friend-item
v-for="friend in friends"
:key="friend.id"
:friend="friend"
@select="handleSelect"
/>
</div>
</template>数据定义与初始化
在Vue组件的data或setup中定义好友数据。推荐使用数组存储好友对象，每个对象包含必要属性：
data() {
return {
friends: [
{ id: 1, name: '张三', avatar: '/avatars/1.jpg', online: true },
{ id: 2, name: '李四', avatar: '/avatars/2.jpg', online: false }
]
}
}实现好友项组件
创建独立的FriendItem.vue组件接收父组件传递的prop：
<template>
<div
class="friend-item"
:class="{ 'is-online': friend.online }"
@click="$emit('select', friend.id)"
>
<img :src="friend.avatar" class="avatar">
<span>{{ friend.name }}</span>
</div>
</template>
<script>
export default {
props: {
friend: {
type: Object,
required: true
}
}
}
</script>添加交互功能
在父组件中实现好友选择逻辑：
methods: {
handleSelect(friendId) {
const selectedFriend = this.friends.find(f => f.id === friendId)
console.log('Selected:', selectedFriend.name)
// 可触发路由跳转或打开聊天窗口
}
}样式优化
使用CSS为列表添加视觉效果：
.friend-list {
width: 300px;
border-right: 1px solid #eee;
}
.friend-item {
padding: 12px;
display: flex;
align-items: center;
cursor: pointer;
}
.friend-item:hover {
background-color: #f5f5f5;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
}
.is-online .avatar {
border: 2px solid #4CAF50;
}数据动态加载
实际项目中通常从API获取数据：
async created() {
try {
const response = await axios.get('/api/friends')
this.friends = response.data
} catch (error) {
console.error('加载好友列表失败', error)
}
}状态管理优化
对于大型应用，建议使用Vuex或Pinia管理好友状态：
// 在store中定义
state: {
friends: []
},
actions: {
async loadFriends({ commit }) {
const friends = await fetchFriends()
commit('SET_FRIENDS', friends)
}
}实现分组功能
扩展数据结构支持分组显示：
data() {
return {
groupedFriends: {
'同事': [...],
'同学': [...],
'家人': [...]
}
}
}模板中使用v-for嵌套渲染：
<div v-for="(group, name) in groupedFriends" :key="name">
<h3>{{ name }}</h3>
<friend-item v-for="friend in group" ... />
</div>
