当前位置：首页 > VUE

vue怎么实现通讯录

2026-02-09 19:49:52VUE

Vue 实现通讯录的方法

数据准备与组件结构

通讯录通常需要展示联系人列表，并提供搜索、分组等功能。在Vue中，可以通过组件化和响应式数据管理实现。

// 示例数据格式
contacts: [
  { name: '张三', phone: '13800138000', group: '朋友' },
  { name: '李四', phone: '13900139000', group: '同事' }
]

列表渲染与分组

使用v-for渲染联系人列表，结合计算属性实现按首字母分组：

computed: {
  groupedContacts() {
    return this.contacts.reduce((groups, contact) => {
      const firstChar = contact.name.charAt(0).toUpperCase()
      if (!groups[firstChar]) groups[firstChar] = []
      groups[firstChar].push(contact)
      return groups
    }, {})
  }
}

模板部分实现分组展示：

vue怎么实现通讯录

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

搜索功能实现

添加搜索框并过滤联系人：

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

字母导航快速定位

右侧字母导航栏实现：

vue怎么实现通讯录

computed: {
  letters() {
    return Object.keys(this.groupedContacts).sort()
  }
},
methods: {
  scrollToLetter(letter) {
    // 滚动到对应字母分组位置
  }
}

完整组件示例

整合后的通讯录组件示例：

<template>
  <div class="address-book">
    <input v-model="searchQuery" placeholder="搜索联系人">

    <div class="letter-index">
      <span v-for="letter in letters" @click="scrollToLetter(letter)">
        {{ letter }}
      </span>
    </div>

    <div v-for="(group, letter) in filteredGroups" :key="letter" :id="`letter-${letter}`">
      <h3>{{ letter }}</h3>
      <div v-for="contact in group" :key="contact.phone" class="contact">
        {{ contact.name }} - {{ contact.phone }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contacts: [...],
      searchQuery: ''
    }
  },
  computed: {
    filteredGroups() {
      // 组合搜索和分组逻辑
    },
    letters() {
      // 获取可用字母
    }
  }
}
</script>