当前位置：首页 > VUE

vue实现好友列表

2026-02-25 18:40:21VUE

Vue 实现好友列表

数据结构设计

使用 Vue 的 data 或 ref（Composition API）定义好友列表数据。通常是一个数组，每个元素包含好友的基本信息（如 ID、头像、昵称、状态等）。

// Options API
data() {
  return {
    friends: [
      { id: 1, name: "张三", avatar: "avatar1.jpg", online: true },
      { id: 2, name: "李四", avatar: "avatar2.jpg", online: false }
    ]
  }
}

// Composition API
const friends = ref([
  { id: 1, name: "张三", avatar: "avatar1.jpg", online: true },
  { id: 2, name: "李四", avatar: "avatar2.jpg", online: false }
]);

列表渲染

使用 v-for 指令渲染好友列表，绑定 key 属性以提高性能。

<template>
  <div class="friend-list">
    <div v-for="friend in friends" :key="friend.id" class="friend-item">
      <img :src="friend.avatar" :alt="friend.name" />
      <span>{{ friend.name }}</span>
      <span :class="{ online: friend.online }">
        {{ friend.online ? "在线" : "离线" }}
      </span>
    </div>
  </div>
</template>

样式与交互

通过 CSS 美化列表，并为列表项添加交互效果（如悬停、点击事件）。

.friend-list {
  width: 200px;
  border: 1px solid #eee;
}
.friend-item {
  padding: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.friend-item:hover {
  background: #f5f5f5;
}
.online {
  color: green;
}

动态操作

实现添加、删除或搜索好友的功能，通过方法更新列表数据。

methods: {
  addFriend(name) {
    this.friends.push({
      id: this.friends.length + 1,
      name,
      avatar: "default.jpg",
      online: false
    });
  },
  removeFriend(id) {
    this.friends = this.friends.filter(friend => friend.id !== id);
  }
}

后端集成

通过 API 请求从后端获取好友列表数据，使用 axios 或 fetch。

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

状态管理（可选）

对于复杂应用，可以使用 Vuex 或 Pinia 集中管理好友列表状态。

// Pinia 示例
export const useFriendStore = defineStore("friends", {
  state: () => ({
    friends: []
  }),
  actions: {
    async fetchFriends() {
      this.friends = await axios.get("/api/friends");
    }
  }
});

vue实现好友列表