vue实现好友列表

实现好友列表的Vue组件

数据准备 在Vue组件的data中定义好友列表数据，通常是一个数组对象，每个对象包含好友的基本信息如ID、头像、昵称等。

data() {
  return {
    friends: [
      { id: 1, name: '张三', avatar: '/avatars/1.jpg', status: 'online' },
      { id: 2, name: '李四', avatar: '/avatars/2.jpg', status: 'offline' },
      { id: 3, name: '王五', avatar: '/avatars/3.jpg', status: 'online' }
    ]
  }
}

模板结构 使用v-for指令循环渲染好友列表，结合条件渲染显示不同状态的好友。

<template>
  <div class="friend-list">
    <div v-for="friend in friends" :key="friend.id" class="friend-item">
      <img :src="friend.avatar" class="avatar">
      <span class="name">{{ friend.name }}</span>
      <span class="status" :class="friend.status">{{ friend.status }}</span>
    </div>
  </div>
</template>

样式设计 为好友列表添加CSS样式，增强视觉效果。

.friend-list {
  width: 300px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.status {
  margin-left: auto;
  font-size: 12px;
  color: #999;
}

.status.online {
  color: #67C23A;
}

.status.offline {
  color: #909399;
}

交互功能 添加点击事件处理，实现好友选择功能。

methods: {
  selectFriend(friend) {
    this.$emit('friend-selected', friend)
  }
}

在模板中绑定点击事件：

<div v-for="friend in friends" 
     :key="friend.id" 
     class="friend-item"
     @click="selectFriend(friend)">

数据加载 实际项目中通常需要从API获取好友数据。

created() {
  this.fetchFriends()
},
methods: {
  async fetchFriends() {
    try {
      const response = await axios.get('/api/friends')
      this.friends = response.data
    } catch (error) {
      console.error('获取好友列表失败', error)
    }
  }
}

状态管理 对于大型应用，建议使用Vuex管理好友状态。

computed: {
  friends() {
    return this.$store.state.friends.list
  }
}