当前位置：首页 > VUE

vue通讯录实现

2026-02-20 21:21:28VUE

实现 Vue 通讯录功能

通讯录功能通常包括联系人列表展示、搜索、分组和增删改查等操作。以下是基于 Vue 的实现方法：

vue通讯录实现

数据准备

定义通讯录数据结构，通常包含姓名、电话、分组等信息：

vue通讯录实现

data() {
  return {
    contacts: [
      { name: '张三', phone: '13800138000', group: '家人' },
      { name: '李四', phone: '13900139000', group: '朋友' },
      // 更多联系人...
    ],
    searchText: '',
    currentGroup: '全部'
  }
}

列表展示

使用 v-for 渲染联系人列表，添加筛选功能：

<template>
  <div class="contact-list">
    <input v-model="searchText" placeholder="搜索联系人">
    <select v-model="currentGroup">
      <option value="全部">全部</option>
      <option v-for="group in groups" :value="group">{{ group }}</option>
    </select>

    <ul>
      <li v-for="contact in filteredContacts" :key="contact.phone">
        {{ contact.name }} - {{ contact.phone }}
        <span class="group-tag">{{ contact.group }}</span>
      </li>
    </ul>
  </div>
</template>

计算属性处理筛选逻辑

computed: {
  groups() {
    return [...new Set(this.contacts.map(c => c.group))]
  },
  filteredContacts() {
    return this.contacts.filter(contact => {
      const matchSearch = contact.name.includes(this.searchText) || 
                         contact.phone.includes(this.searchText)
      const matchGroup = this.currentGroup === '全部' || 
                        contact.group === this.currentGroup
      return matchSearch && matchGroup
    })
  }
}

添加联系人功能

<div class="add-contact">
  <input v-model="newContact.name" placeholder="姓名">
  <input v-model="newContact.phone" placeholder="电话">
  <select v-model="newContact.group">
    <option v-for="group in groups" :value="group">{{ group }}</option>
  </select>
  <button @click="addContact">添加</button>
</div>

methods: {
  addContact() {
    if (this.newContact.name && this.newContact.phone) {
      this.contacts.push({...this.newContact})
      this.newContact = { name: '', phone: '', group: '朋友' }
    }
  }
}

样式优化

添加基础样式增强用户体验：

.contact-list {
  max-width: 600px;
  margin: 0 auto;
}
.contact-list li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.group-tag {
  float: right;
  color: #666;
  font-size: 0.8em;
}