当前位置：首页 > VUE

vue 实现通讯录

2026-01-21 01:42:48VUE

实现通讯录的 Vue 方案

通讯录的核心功能通常包括联系人列表展示、搜索、分组（如按字母排序）以及增删改查操作。以下是基于 Vue 的实现方案：

数据结构设计

建议使用数组存储联系人数据，每个联系人包含基础信息（姓名、电话、首字母等）：

contacts: [
  { name: "张三", phone: "13800138000", initial: "Z" },
  { name: "李四", phone: "13900139000", initial: "L" }
]

按字母分组

通过计算属性实现按首字母分组：

computed: {
  groupedContacts() {
    return this.contacts.reduce((groups, contact) => {
      const letter = contact.initial.toUpperCase()
      groups[letter] = groups[letter] || []
      groups[letter].push(contact)
      return groups
    }, {})
  }
}

模板渲染

使用 v-for 嵌套渲染分组后的联系人：

<div v-for="(group, letter) in groupedContacts" :key="letter">
  <h3>{{ letter }}</h3>
  <ul>
    <li v-for="contact in group" :key="contact.phone">
      {{ contact.name }} - {{ contact.phone }}
    </li>
  </ul>
</div>

搜索功能

添加搜索框并通过计算属性过滤结果：

computed: {
  filteredContacts() {
    return this.contacts.filter(contact => 
      contact.name.includes(this.searchQuery) || 
      contact.phone.includes(this.searchQuery)
    )
  }
}

右侧字母导航

实现快速跳转的字母导航栏：

vue 实现通讯录

<div class="index-bar">
  <span 
    v-for="letter in Object.keys(groupedContacts)" 
    :key="letter"
    @click="scrollTo(letter)"
  >
    {{ letter }}
  </span>
</div>

完整组件示例

export default {
  data() {
    return {
      contacts: [...],
      searchQuery: ''
    }
  },
  computed: {
    filteredContacts() {
      // 搜索逻辑
    },
    groupedContacts() {
      // 分组逻辑
    }
  },
  methods: {
    scrollTo(letter) {
      // 滚动到对应字母组
    }
  }
}