当前位置：首页 > VUE

vue实现通讯录代码

2026-03-27 03:39:28VUE

vue实现通讯录代码

以下是一个基于Vue.js实现的通讯录代码示例，包含基本功能如联系人列表展示、搜索和添加联系人。

项目结构

src/
├── components/
│   ├── ContactList.vue
│   ├── ContactForm.vue
│   └── SearchBar.vue
├── App.vue
└── main.js

核心代码实现

主组件 (App.vue)

<template>
  <div id="app">
    <h1>通讯录</h1>
    <SearchBar @search="handleSearch" />
    <ContactForm @add-contact="addContact" />
    <ContactList :contacts="filteredContacts" @delete-contact="deleteContact" />
  </div>
</template>

<script>
import ContactList from './components/ContactList.vue'
import ContactForm from './components/ContactForm.vue'
import SearchBar from './components/SearchBar.vue'

export default {
  components: { ContactList, ContactForm, SearchBar },
  data() {
    return {
      contacts: [
        { id: 1, name: '张三', phone: '13800138000' },
        { id: 2, name: '李四', phone: '13900139000' }
      ],
      searchQuery: ''
    }
  },
  computed: {
    filteredContacts() {
      return this.contacts.filter(contact =>
        contact.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
        contact.phone.includes(this.searchQuery)
      )
    }
  },
  methods: {
    addContact(contact) {
      this.contacts.push({ ...contact, id: Date.now() })
    },
    deleteContact(id) {
      this.contacts = this.contacts.filter(contact => contact.id !== id)
    },
    handleSearch(query) {
      this.searchQuery = query
    }
  }
}
</script>

联系人列表组件 (ContactList.vue)

<template>
  <ul class="contact-list">
    <li v-for="contact in contacts" :key="contact.id">
      <span>{{ contact.name }}</span>
      <span>{{ contact.phone }}</span>
      <button @click="$emit('delete-contact', contact.id)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['contacts']
}
</script>

<style>
.contact-list {
  list-style: none;
  padding: 0;
}
.contact-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid #eee;
}
</style>

添加联系人表单 (ContactForm.vue)

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="name" placeholder="姓名" required />
    <input v-model="phone" placeholder="电话" required />
    <button type="submit">添加联系人</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      phone: ''
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('add-contact', {
        name: this.name,
        phone: this.phone
      })
      this.name = ''
      this.phone = ''
    }
  }
}
</script>

搜索组件 (SearchBar.vue)

<template>
  <input 
    type="text" 
    placeholder="搜索联系人..." 
    @input="$emit('search', $event.target.value)"
  />
</template>

<script>
export default {
  emits: ['search']
}
</script>