当前位置：首页 > VUE

vue实现好友列表

2026-01-12 00:38:54VUE

Vue 实现好友列表

要实现一个好友列表功能，可以通过 Vue.js 结合组件化开发和数据管理来完成。以下是具体实现方法：

数据准备

好友列表通常需要一个数组来存储好友信息，每个好友对象包含 id、name、avatar 等字段。示例数据如下：

data() {
  return {
    friends: [
      { id: 1, name: '张三', avatar: 'https://example.com/avatar1.jpg', online: true },
      { id: 2, name: '李四', avatar: 'https://example.com/avatar2.jpg', online: false },
      // 更多好友数据...
    ]
  }
}

列表渲染

使用 v-for 指令遍历好友数组，动态生成列表项：

<ul class="friend-list">
  <li 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="{ online: friend.online }"></span>
  </li>
</ul>

样式设计

添加 CSS 样式美化列表，区分在线状态：

.friend-list {
  list-style: none;
  padding: 0;
}
.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 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
}
.status.online {
  background: #4CAF50;
}

交互功能

可以为列表项添加点击事件，实现选中或跳转到聊天界面：

<li v-for="friend in friends" 
    :key="friend.id" 
    @click="selectFriend(friend.id)">
  <!-- 内容同上 -->
</li>

methods: {
  selectFriend(id) {
    console.log(`选中好友ID: ${id}`);
    // 实际业务中可能跳转路由或打开聊天窗口
  }
}

数据排序

通过计算属性实现按在线状态排序：

computed: {
  sortedFriends() {
    return [...this.friends].sort((a, b) => 
      b.online - a.online || a.name.localeCompare(b.name)
    );
  }
}

模板中改用 sortedFriends 替代原数组：

<li v-for="friend in sortedFriends" ...>

后端集成

实际项目中通常通过 API 获取好友数据：

created() {
  axios.get('/api/friends')
    .then(response => {
      this.friends = response.data;
    })
    .catch(error => {
      console.error('获取好友列表失败', error);
    });
}

组件化拆分

对于复杂场景，可以将好友项拆分为独立组件：

vue实现好友列表

<friend-item 
  v-for="friend in friends"
  :key="friend.id"
  :friend="friend"
  @select="onSelect"
/>

components: {
  'friend-item': {
    props: ['friend'],
    template: `<!-- 好友项模板 -->`,
    methods: {
      handleClick() {
        this.$emit('select', this.friend.id);
      }
    }
  }
}